jQuery छवि प्रीलोड/कैश halting ब्राउज़र

Question

संक्षेप में, मेरे पास एक बहुत बड़ी फोटो गैलरी है और मैं थंबनेल छवियों को कैश करने की कोशिश कर रहा हूं जैसा कि पहला पृष्ठ लोड हो सकता है। 1000+ थंबनेल हो सकते हैं।

पहला प्रश्न - क्या यह कई लोगों को प्रीलोड/कैश करने का प्रयास करने के लिए बेवकूफ है?

दूसरा प्रश्न - जब preload() फ़ंक्शन आग लगती है, तो संपूर्ण ब्राउज़र एक मिनट से दो के लिए जवाब देना बंद कर देता है। उस समय कॉलबैक आग लगती है, इसलिए प्रीलोड पूरा हो गया है। क्या "स्मार्ट प्रीलोडिंग" को पूरा करने का कोई तरीका है जो इस ऑब्जेक्ट को लोड करने का प्रयास करते समय उपयोगकर्ता अनुभव/गति पर बाधा नहीं डालता है?

$.preLoadImages समारोह यहाँ से ले रहा है: http://binarykitten.me.uk/dev/jq-plugins/107-jquery-image-preloader-plus-callbacks.html

यहाँ कैसे मैं इसे लागू करने हूँ:

$(document).ready(function() { 
    setTimeout("preload()", 5000); 
}); 
function preload() { 
    var images = ['image1.jpg', ... 'image1000.jpg']; 
    $.preLoadImages(images, function() { alert('done'); }); 
} 

1000 छवियों एक बहुत है। क्या मेरी मांग बहुत ज़्यादा है?

Answer 1

उस प्रीलोड स्क्रिप्ट को देखने के बाद, ऐसा प्रतीत होता है कि स्क्रिप्ट अगले छवि पर जाने से पहले एक छवि को लोड करने की प्रतीक्षा नहीं करती है। मेरा मानना ​​है कि यह आपके ब्राउज़र को लटकने का कारण बनता है - आप अनिवार्य रूप से ब्राउजर को एक ही समय में एक सौ छवियों को लोड करने के लिए कह रहे हैं।

एक बेहतर तरीका एक पुनरावर्ती समारोह का उपयोग करने के बाद ही पहले एक से किया जाता है अगली छवि लोड हो रहा है शुरू करने के लिए किया जाएगा। यहां एक साधारण उदाहरण है जिसे मैंने एक साथ रखा है।

संपादित करें: यह एक ढेर अतिप्रवाह त्रुटियों, नीचे नया संस्करण देखने के कारण बनता है।

var preLoadImages = function(imageList, callback) { 
    var count = 0; 
    var loadNext = function(){ 
     var pic = new Image(); 
     pic.onload = function(){ 
      count++; 
      if(count >= imageList.length){ 
       callback(); 
      } 
      else{ 
       loadNext(); 
      } 
     } 
     pic.src = imageList[count]; 
    } 
    loadNext(); 
}; 

$(document).ready(function(){ 
    var files = ['file1,jpg', 'file2.jpg']; 
    preLoadImages(files, function(){ alert("Done!"); }); 
}); 

फिर, यहां महत्वपूर्ण बात यह है कि आप केवल एक समय में एक छवि डाउनलोड करने के लिए ब्राउज़र के लिए मजबूर कर रहे हैं बनाने के लिए है। इससे भी अधिक और आप ब्राउज़र समाप्त होने तक ब्राउज़र को लॉक करने का जोखिम उठाते हैं।

-

संपादित करें: नया संस्करण बिना प्रत्यावर्तन। मैंने इसे 1000+ आइटम सरणी के साथ परीक्षण किया और किसी भी त्रुटि का सामना नहीं किया। मेरा विचार एक अंतराल और एक बुलियन के साथ रिकर्सन को प्रतिस्थापित करना था; हर 50 मिलीसेकंड, हम समारोह को मतदान करते हैं और पूछते हैं "कुछ भी लोड हो रहा है?" अगर उत्तर नहीं है, तो हम आगे बढ़ेंगे और अगली छवि कतारबद्ध करेंगे। यह सब खत्म होने तक बार-बार दोहराता है।

var preLoadImages = function(imageList, callback) { 
    var count = 0; 
    var loading = false; 
    var loadNext = function(){ 
     if(!loading){ 
      loading = true; 
      count++; 
      pic = new Image(); 
      pic.onload = function(){ 
       loading = false; 
       if(count >= imageList.length-1){ 
         clearInterval(loadInterval); 
         callback(); 
       } 
      } 
      pic.src = imageList[count]; 
     } 
    } 
    var loadInterval = window.setInterval(loadNext, 50); 
}; 

मैं अभी भी उत्सुक हूं कि यह कैसे करेगा, प्रदर्शन के अनुसार, एक पूर्ण वेबपृष्ठ पर, कई अन्य सामान चल रहा है। आईये जानते हैं कि यह कैसा रहेगा।

Answer 2

यह एक दिलचस्प प्रदर्शन सवाल है। फ़ायरबग या क्रोम डेवलपर टूल्स में यह कैसे करता है जब आप इसे प्रीलोड करते हैं? इससे मुझे लगता है कि यह Lazy Load Plugin का अच्छा उपयोग होगा।

आलसी लोडर जावास्क्रिप्ट में लिखा गया एक jQuery प्लगइन है। यह (लंबे) वेब पृष्ठों में छवियों को लोड करने में देरी करता है। व्यूपोर्ट के बाहर छवियों ( वेब पेज का दृश्य भाग) उपयोगकर्ता स्क्रॉल करने से पहले लोड नहीं किया जाएगा। यह छवि प्रीलोडिंग के विपरीत है।