1. घर
  2. सवाल और जवाब
  3. छवियों को प्रीलोड करने का सबसे अच्छा तरीका

छवियों को प्रीलोड करने का सबसे अच्छा तरीका

2011-05-27 19 views
8

छवियों को प्रीलोड करने का सबसे अच्छा तरीका क्या है? मैं एक छवि टैब बनाने की कोशिश कर रहा हूं जिसमें लगभग 5 9 पीएनजी छवियां हैं।छवियों को प्रीलोड करने का सबसे अच्छा तरीका

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 
<html> 
    <head> 
    <title>Checklist</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" type="text/css" href="/systems_hr/Style%20Library/globalstyles_test.css"> 
    <style type="text/css"> 
     #innerframe { 
       width: 100%; 
       height: 63em; 
     } 
    </style> 
    <script type="text/javascript" src="/systems_hr/Style%20Library/JavaScripts/styles.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>  
    <script type="text/javascript">  

     var id1 = new Image(); 
     id1.src = "images/id1.png"; 

     var id11 = new Image(); 
     id11.src = "images/id1-1.png"; 

     var id12 = new Image(); 
     id12.src = "images/id1-2.png"; 

     var id13 = new Image(); 
     id13.src = "images/id1-3.png"; 

     var id2 = new Image(); 
     id2.src = "images/id2.png"; 

     var id21 = new Image(); 
     id21.src = "images/id2-1.png"; 

     var id22 = new Image(); 
     id22.src = "images/id2-2.png"; 

     var id23 = new Image(); 
     id23.src = "images/id2-3.png";  

     var id3 = new Image(); 
     id3.src = "images/id3.png"; 

     var id31 = new Image(); 
     id31.src = "images/id3-1.png"; 

     var id32 = new Image(); 
     id32.src = "images/id3-2.png"; 

     var id33 = new Image(); 
     id33.src = "images/id3-3.png";  

     var id4 = new Image(); 
     id4.src = "images/id4.png"; 

     var id41 = new Image(); 
     id41.src = "images/id4-1.png"; 

     var id42 = new Image(); 
     id42.src = "images/id4-2.png"; 

     var id43 = new Image(); 
     id43.src = "images/id4-3.png"; 

     var iw1 = new Image(); 
     iw1.src = "images/iw1.png" 

     var iw11 = new Image(); 
     iw11.src = "images/iw1-1.png" 

     var iw12 = new Image(); 
     iw12.src = "images/iw1-2.png" 

     var iw13 = new Image(); 
     iw13.src = "images/iw1-3.png" 

     var iw14 = new Image(); 
     iw14.src = "images/iw1-4.png" 

     var iw2 = new Image(); 
     iw2.src = "images/iw2.png" 

     var iw21 = new Image(); 
     iw21.src = "images/iw2-1.png" 

     var iw22 = new Image(); 
     iw22.src = "images/iw2-2.png" 

     var iw23 = new Image(); 
     iw23.src = "images/iw2-3.png" 

     var iw24 = new Image(); 
     iw24.src = "images/iw2-4.png" 

      var iw3 = new Image(); 
     iw3.src = "images/iw3.png" 

     var iw31 = new Image(); 
     iw31.src = "images/iw3-1.png" 

     var iw32 = new Image(); 
     iw32.src = "images/iw3-2.png" 

     var iw33 = new Image(); 
     iw33.src = "images/iw3-3.png" 

     var iw34 = new Image(); 
     iw34.src = "images/iw3-4.png" 

     var iw4 = new Image(); 
     iw4.src = "images/iw4.png" 

     var iw41 = new Image(); 
     iw41.src = "images/iw4-1.png" 

     var iw42 = new Image(); 
     iw42.src = "images/iw4-2.png" 

     var iw43 = new Image(); 
     iw43.src = "images/iw4-3.png" 

     var iw44 = new Image(); 
     iw44.src = "images/iw4-4.png"  

     var im1 = new Image(); 
     im1.src = "images/im1.png" 

     var im11 = new Image(); 
     im11.src = "images/im1-1.png" 

     var im12 = new Image(); 
     im12.src = "images/im1-2.png" 

     var im13 = new Image(); 
     im13.src = "images/im1-3.png" 

     var im2 = new Image(); 
     im2.src = "images/im2.png" 

     var im21 = new Image(); 
     im21.src = "images/im2-1.png" 

     var im22 = new Image(); 
     im22.src = "images/im2-2.png" 

     var im23 = new Image(); 
     im23.src = "images/im2-3.png" 

     var im3 = new Image(); 
     im3.src = "images/im3.png" 

     var im31 = new Image(); 
     im31.src = "images/im3-1.png" 

     var im32 = new Image(); 
     im32.src = "images/im3-2.png" 

     var im33 = new Image(); 
     im33.src = "images/im3-3.png" 

     function changeFrame (frameSRC) 
     { 
     var myFrame = document.getElementById('fraContent'); 
     myFrame.contentWindow.location = frameSRC; 
     } 

     function rolloverArea(area, orgImgSrc, tgtImgSrc, orgCursor, tgtCursor) // jQuery script for rollover effect 
     { 
     $("#imgTab").attr("src", orgImgSrc); 
     $(area).hover(
      function() 
      { 
       $("#imgTab").attr("src", tgtImgSrc); 
       $("#imgTab").css("cursor",tgtCursor); 
      }, 
      function() 
      { 
       $("#imgTab").attr("src", orgImgSrc); 
       $("#imgTab").css("cursor",orgCursor); 
      } 
     ); 
     } 

     /*function initLoad() 
     { 
     }*/ 

     function changeImgState(img) // tab interface of Day Week and Month arrows 
     { 
     var myImgTab = document.getElementById("imgTab"); 

     switch (img) 
     { 
      case 'id1': 

      myImgTab.src = id1.src; 

      // Rollover effect for the image 
      rolloverArea("#area1",id1.src,id1.src,"auto","auto"); 
      rolloverArea("#area2",id1.src,id11.src,"auto","pointer"); 
      rolloverArea("#area3",id1.src,id12.src,"auto","pointer"); 
      rolloverArea("#area4",id1.src,id13.src,"auto","pointer"); 
      rolloverArea("#area5",id1.src,id1.src,"auto","auto"); 

      // onClick effect 
      $("#area2").click(function() { 
       $("#innerframe").attr("src","D2.html"); 
       changeImgState("id2"); 
       } 
      ); 

      $("#area3").click(function() { 
       $("#innerframe").attr("src","D3.html"); 
       changeImgState("id3"); 
       } 
      ); 

      $("#area4").click(function() { 
       $("#innerframe").attr("src","D4.html"); 
       changeImgState("id4"); 
       } 
      ); 

      break; 
      case 'id2': 

      myImgTab.src = id2.src; 

      // Rollover effect for the image 
      rolloverArea("#area1",id2.src,id21.src,"auto","pointer"); 
      rolloverArea("#area2",id2.src,id2.src,"auto","auto"); 
      rolloverArea("#area3",id2.src,id22.src,"auto","pointer"); 
      rolloverArea("#area4",id2.src,id23.src,"auto","pointer"); 
      rolloverArea("#area5",id2.src,id2.src,"auto","auto"); 

      // onClick effect 
      $("#area1").click(function() { 
       $("#innerframe").attr("src","D1.html"); 
       changeImgState("id1"); 
       } 
      ); 

      $("#area3").click(function() { 
       $("#innerframe").attr("src","D3.html"); 
       changeImgState("id3"); 
       } 
      ); 

      $("#area4").click(function() { 
       $("#innerframe").attr("src","D4.html"); 
       changeImgState("id4"); 
       } 
      ); 

      break; 

      case 'id3': 

      myImgTab.src = id3.src; 

      // Rollover effect for the image 
      rolloverArea("#area1",id3.src,id31.src,"auto","pointer"); 
      rolloverArea("#area2",id3.src,id32.src,"auto","pointer"); 
      rolloverArea("#area3",id3.src,id3.src,"auto","auto"); 
      rolloverArea("#area4",id3.src,id33.src,"auto","pointer"); 
      rolloverArea("#area5",id3.src,id3.src,"auto","auto"); 

      // onClick effect 
      $("#area1").click(function() { 
       $("#innerframe").attr("src","D1.html"); 
       changeImgState("id3"); 
       } 
      ); 

      $("#area2").click(function() { 
       $("#innerframe").attr("src","D2.html"); 
       changeImgState("id2"); 
       } 
      ); 

      $("#area4").click(function() { 
       $("#innerframe").attr("src","D4.html"); 
       changeImgState("id4"); 
       } 
      ); 

      break; 

      case 'id4': 

      myImgTab.src = id4.src; 

      // Rollover effect for the image 
      rolloverArea("#area1",id4.src,id41.src,"auto","pointer"); 
      rolloverArea("#area2",id4.src,id42.src,"auto","pointer"); 
      rolloverArea("#area3",id4.src,id43.src,"auto","pointer"); 
      rolloverArea("#area4",id4.src,id4.src,"auto","auto"); 
      rolloverArea("#area5",id4.src,id4.src,"auto","auto"); 

      // onClick effect 
      $("#area1").click(function() { 
       $("#innerframe").attr("src","D1.html"); 
       changeImgState("id3"); 
       } 
      ); 

      $("#area2").click(function() { 
       $("#innerframe").attr("src","D2.html"); 
       changeImgState("id2"); 
       } 
      ); 

      $("#area4").click(function() { 
       $("#innerframe").attr("src","D4.html"); 
       changeImgState("id4"); 
       } 
      ); 

      break; 

      case 'iw1': 

      myImgTab.src = iw1.src; 

      rolloverArea("#area1",iw1.src,iw1.src,"auto","auto"); 
      rolloverArea("#area2",iw1.src,iw11.src,"auto","pointer"); 
      rolloverArea("#area3",iw1.src,iw12.src,"auto","pointer"); 
      rolloverArea("#area4",iw1.src,iw13.src,"auto","pointer"); 
      rolloverArea("#area5",iw1.src,iw14.src,"auto","pointer"); 

      break; 
      case 'im1': 

      myImgTab.src = im1.src; 

      rolloverArea("#area1",im1.src,im1.src,"auto","auto"); 
      rolloverArea("#area2",im1.src,im11.src,"auto","pointer"); 
      rolloverArea("#area3",im1.src,im12.src,"auto","pointer"); 
      rolloverArea("#area4",im1.src,im13.src,"auto","pointer"); 
      rolloverArea("#area5",im1.src,im1.src,"auto","auto");   
      break; 
     } 

     } 

     function changeTab(tab) 
     { 
     switch(tab)  
     { 
      case 'day1': 
      var myTab = document.getElementById("day1"); 

      document.getElementById("week1").className = "active"; 
      document.getElementById("month1").className = "active";   
      myTab.className = "current"; 

      changeImgState("id1"); 
      $("#innerframe").attr("src","D1.html"); 

      break; 
      case 'week1': 
      document.getElementById("day1").className = "active"; 
      document.getElementById("month1").className = "active";   
      document.getElementById("week1").className = "current"; 

      changeImgState("iw1"); 
      $("#innerframe").attr("src","W1.html"); 

      break; 
      case 'month1': 
      document.getElementById("week1").className = "active"; 
      document.getElementById("day1").className = "active";   
      document.getElementById("month1").className = "current"; 

      changeImgState("im1"); 
      $("#innerframe").attr("src","M1.html"); 

      break; 
     } 

     } 

     function test(tab) 
     { 
     alert(document.getElementById.id + " " + document.getElementById(tab).className) 
     } 
    </script> 

    </head> 
    <body onload="changeTab('day1');"> 
    <table border="0" width="100%"> 
    <tr> 
    <td colspan="2" align="left"> 
     <div id="navcontainer"> 
     <ul id="navlist"> 
      <li><a class="active" id="day1" onclick="changeTab('day1');">FIRST DAY</a></li> 
      <li><a class="active" id="week1" onclick="changeTab('week1');">FIRST WEEK</a></li> 
      <li><a class="active" id="month1" onclick="changeTab('month1');">FIRST 30-DAYS</a></li> 
     </ul> 
     </div> 
     <div id="page_viewer"> 
      <table border="0" width="1020px" cellpadding="0" cellspacing="0"> 
      <tr> 
      <td> 
       <img src="" style="border: 0px; width: 1000px; height: 72px;" alt="" usemap="#imgTabMap" name="imgTab" id="imgTab"> 
       <map id="imgTabMap" name="imgTabMap"> 
        <area shape="rect" alt="" title="" coords="7,11,166,60" id="area1"> 
        <area shape="rect" alt="" title="" coords="206,10,365,59" id="area2"> 
        <area shape="rect" alt="" title="" coords="405,11,566,59" id="area3"> 
        <area shape="rect" alt="" title="" coords="605,10,763,60" id="area4"> 
        <area shape="rect" alt="" title="" coords="805,9,963,60" id="area5"> 
        <!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --> 
       </map> 

      </td> 
      </tr> 
      <tr> 
      <td width="100%"> 
       <iframe name="fraContent" id="innerframe" frameborder="0" scrolling="no" width="1000px"></iframe> 
      </td> 
      </tr> 
      </table> 
     </div> 
     </td> 
    </tr> 
    </table> 
    </body> 
</html>

बात अब है मेरा पेज लोड करने के लिए कुछ समय लगता है, और मैं समझ नहीं क्यों एक टैब पर क्लिक धीरे आइफ्रेम लोड करने के लिए लगता है: यहाँ कोड मैं अब तक राशि है। Iframe के src को लोड करने से छवियों को फिर से लोड किया जा सकता है? पृष्ठ खोलने पर उन्हें लोड होने के बजाय प्रासंगिक छवियों को क्लिक करना बेहतर होगा?

मुझे लिल्डुलेव की समांतर लोडिंग स्क्रिप्ट (imagesQueue) के रूप में भी एक अच्छा विकल्प मिला लेकिन मुझे नहीं पता कि इसका उपयोग कैसे किया जाए।

बीटीडब्ल्यू, मैं जावास्क्रिप्ट में अच्छी तरह से ज्ञात नहीं हूं, इसलिए मैं काम करने की कोशिश कर रहा हूं क्योंकि मैं काम करता हूं। अभी, मैं जो कर रहा हूं वह उन तकनीकों को कार्यान्वित कर रहा है जो मैं शोध करता हूं और उनके कार्यों को समझने की कोशिश करता हूं, इसलिए मेरा कोडिंग उतना स्वच्छ नहीं है जितना मैं चाहता हूं, कभी-कभी केवल अक्षम "क्रूर बल" वांछित प्रभाव प्राप्त करने के लिए कोड। मैं उस पर सुधार करना चाहता हूं, हालांकि, और किसी भी मदद की सराहना की जाएगी।

समानांतर कैश स्क्रिप्ट के बारे में, यहाँ एक परीक्षण पृष्ठ मैं निक के डेमो के बाद पैटर्न वाली की स्थापना की है:

 <html> 
     <head> 
      <title>liel's smij dev page</title> 
      <style type="text/css"> 
       #m1{ 
        width:400px; 
        height:300px; 
        background-color:#adf; 
       } 
       canvas{ 
        width:100%; 
        height:100%; 
       } 
       #show_me{float:left;width:100px;} 
       #console_log{font-size:10px;float:right;} 
      </style> 
      <script type="text/javascript" src="/systems_hr/Style%20Library/JavaScripts/imagesQueue.js"></script> 
     </head> 
     <body> 
       <h1>imagesQ(ueue.js) Demo</h1> 
       <!-- <img id="show_me" src="images/id1.png"> --> 
       <img id="show_me" alt=""> 
       <div id="console_log">Log:</div> 
       <script type="text/javascript"> 
        /* 
         imagesQueue Usage Example: 
        */ 
        // the img element to show 
        show_img = document.getElementById('show_me'); 
        log_e = document.getElementById('console_log'); 
        log = function(output){log_e.innerHTML +='<br/>'+(output)}; 
        imagesQueue = imagesQ; 
        // On every image loaded show progress: 
        imagesQueue.onLoaded = function() 
        { 
         show_img.src = imagesQueue.current.src; 
         var output = 'Q1 '+(imagesQueue.images.length)+"/"+(imagesQueue.qLength)+" ("+imagesQueue.current.src+") Loaded (onLoaded)"; 
         log(output); 
        } 
        // When done say so. 
        imagesQueue.onComplete = function() 
        { 
         QueuesCompleteAll(); 
        } 
        log('Q1 Queued 10 images (queue_images)'); 
        var now =(new Date).getTime(); // make sure to get non-cached images 
        imagesQueue.queue_images(['images/id1.png'+now, 
               'images/id1-1.png'+now, 
               'images/id1-2.png'+now, 
               'images/id1-3.png'+now, 
               'images/id2.png'+now, 
               'images/id2-1.png'+now, 
               'images/id2-2.png'+now, 
               'images/id2-3.png'+now, 
               'images/id3.png'+now, 
               'images/id3-1.png'+now]); 

        log('Starting the queue (process_queue)'); 
        var start = (new Date).getTime(); 
        imagesQueue.process_queue(); 
        log('This is the next line in the code after process_queue, to avoid this, you should design create a function for the rest of your code and call it upon onComplete.'); 
        function QueuesCompleteAll(){ 
         var diff = (new Date).getTime() - start; 
         log('All Done ('+diff+'ms)'); 
        } 
       </script> 
     </body> 
</html>

पल में, मैं यह काम करने के लिए नहीं मिल सका :(मैं imagesQueue स्क्रिप्ट अपलोड और लिंक किए गए यह पृष्ठ पर और मूल विकास पृष्ठ से छवि मूल्यों को मेरी विकास साइट में बदल दिया गया है।

स्रोत

2011-05-27 Poch

+0

आपके पृष्ठ पर देखे गए डेमो की तुलना करें कि आपकी छवियां/id1-1.png + अब ', गलत है। अब परिवर्तक एक पैरामीटर होगा, और अपने फ़ाइल एक्सटेंशन का विस्तार नहीं करेगा ;-) – reporter

उत्तर

0

दुर्भाग्यवश इस पृष्ठ पर jquery demos की तरह कोई व्याख्या नहीं है। लेकिन एक लिंक है जो पर्यवेक्षण करना आसान है, इसलिए मैं इसे यहां आपके लिए पोस्ट करता हूं: imageQ-Demo। यदि आप स्रोत कोड पढ़ते हैं, तो कल्पना का स्रोत eQ यह स्वयं <head></head> अनुभाग में स्क्रिप्टटाग के भीतर घोंसला है। मैं अनुशंसा करता हूं कि आप इस स्रोत कोड को एक अतिरिक्त फ़ाइल में ले जाएं। अनुकूलित कोड <body></body> अनुभाग के भीतर घोंसला है। आप क्या देख रहे हैं

<script type="text/javascript"> 
    //Make an instance of imageQ 
    imagesQueue = imagesQ; 
    //Define the url of all your images 
    imagesQueue.queue_images (['', '', ...]); 
    //Start the preloading 
    imagesQueue.process_queue(); 
</script>

उम्मीद है कि यह आपकी मदद करेगा।

बीटीडब्ल्यू, इस लिंक के लिए धन्यवाद। ;-)

स्रोत

2011-05-27 09:29:06 reporter

+0

@ निक-वीवर - कोई समस्या नहीं, समानांतर कैशिंग उपयोगी है :) इसके लिए धन्यवाद :) अभी भी एक समस्या है, हालांकि :(यहां एक टेस्ट पेज है जिसे मैंने आपके डेमो पेज के बाद पैटर्न किया था: * ओह, टिप्पणी ब्लॉक में फिट नहीं होगा :(मैं इसे मूल प्रविष्टि में डाल दूंगा। – Poch

+0

@ पोच आपके पृष्ठ पर देखे गए डेमो की तुलना करें कि आपकी छवियां/id1-1.png + अब ', "गलत है। अब परिवर्तनीय एक पैरामीटर होगा, और अपनी फ़ाइल एक्सटेंशन का विस्तार नहीं करेगा ;-) – reporter

2

आपका विचार अच्छा है, जब आप एक धाराप्रवाह छवि परिवर्तन पर क्लिक करना चाहते हैं। Altough स्क्रिप्ट शुद्ध जावास्क्रिप्ट में कोडित है (आप अधिक दृढ़ दृष्टिकोण का उपयोग कर सकते हैं: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript) इसका प्रदर्शन पर इतना बड़ा प्रभाव नहीं होना चाहिए। शायद कारण कहीं और कहता है। शायद आपकी छवियां बहुत भारी हैं ...

जावास्क्रिप्ट के अलावा एक अन्य समाधान शुद्ध सीएसएस दृष्टिकोण का उपयोग कर रहा है और मुझे लगता है कि यह बहुत तेज होगा। एकल पीएनजी पर सभी छवियों को रखने की कोशिश करें और सीएसएस में व्यक्तिगत टैब के पृष्ठभूमि-स्थिति मान में हेरफेर करने का प्रयास करें। उदाहरण के लिए:

.tab { 
    background-image:url('single.png'); 
} 
#tab5 { 
    background-position: 10px 20px; 
} 
#tab5:hover { 
    background-position:10px 25px; 
}

इस तरह सभी छवियों को एक बार में लोड किया जाएगा।

स्रोत

2011-05-27 09:53:16

+0

@ paweł-forys - इसके लिए धन्यवाद :) मैंने अपनी छवियों को देखा और वे 15 - 23 केबी की तरह थे। व्यक्तिगत रूप से, वे छोटे होते हैं, लेकिन शायद सामूहिक रूप से वे किसी भी तरह से प्रदर्शन को कमजोर कर रहे हैं? एक और बात जिसे मैंने ध्यान में नहीं लिया था, वह था कि पिछले शुक्रवार को मेरे पास बहुत सी चीजें खुली थीं। मैंने आज जांच की और यह पिछले शुक्रवार की तरह धीमी नहीं है क्योंकि मेरे पास केवल Outlook, 2 एसपी डिज़ाइनर विंडो और 3 आईई टैब खुले थे। मैं उस स्क्रिप्ट को आजमाउंगा, क्योंकि वर्तमान सेटअप में अभी भी प्रदर्शन समस्याएं हैं। मैं पहले समानांतर कैशिंग का प्रयास करूंगा। – Poch

+0

, लेकिन आपके द्वारा भेजा गया JQuery कोड अब मेरे वैश्विक जेएस फ़ाइल में किसी अन्य पृष्ठ में उपयोग करने के लिए शामिल किया जाएगा :) * हाहाहा को मेरी टिप्पणी को दो हिस्सों में तोड़ना पड़ा, अंतरिक्ष से बाहर भाग गया। – Poch

संबंधित मुद्दे

 संबंधित मुद्दे