jQuery圖像預加載/緩存停止瀏覽器

總之，我有一個非常大的照片庫，我試圖緩存儘可能多的縮略圖圖像，因爲我可以在第一頁加載時。可能有1000多個縮略圖。jQuery圖像預加載/緩存停止瀏覽器

第一個問題 - 試圖預加載/緩存那麼多是愚蠢的嗎？

第二個問題 - 當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圖像是很多。我問得太多了嗎？

來源

2010-06-15 Nathan Loding

重複：http://stackoverflow.com/questions/476679/preloading-images-with-jquery?rq=1 – 2013-06-24 08:33:50

查看該預加載腳本後，看起來該腳本不會等待一個圖像加載，然後再轉到下一個。我相信這是導致瀏覽器掛起的原因 - 你實質上是告訴瀏覽器同時加載100張圖像。

更好的方法是使用遞歸函數在第一個圖像完成後纔開始加載下一個圖像。這是我放在一起的一個簡單例子。

編輯：這一個會導致堆棧溢出錯誤，請參閱下面的新版本。

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!"); }); 
});

同樣，這裏最重要的事情是要確保你只迫使瀏覽器可以同時下載一個圖像。除此之外，你有可能會鎖定瀏覽器，直到完成。

編輯：新版本SANS遞歸。我測試了一個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); 
};

我仍然好奇這將如何做，性能明智，在一個完整的網頁上有很多其他的東西正在進行。讓我們知道怎麼回事。

來源

2010-06-15 03:56:00

我還沒有理解的一件事是，這只是「預加載」的圖像，或者如果它「緩存」它們。任何想法？我將在今天晚上測試這個腳本，並會報告它的工作原理。 – 2010-06-15 15:00:22

好人 - 這絕對是問題。使用'$（''）.attr（'src'，val）'並不等待加載，真的。雖然這很好用！謝謝！ – 2010-06-17 01:46:50

男人，我討厭拿走答案......但是這會導致IE 7和8中的堆棧溢出。遞歸太多了。有關繞過遞歸的任何想法？ – 2010-06-17 02:50:32

這是一個有趣的性能問題。預裝所有內容時，它如何在Firebug或Chrome開發者工具中執行？這讓我想到的是，這將是一個很好的使用Lazy Load Plugin。

懶惰加載器是一個jQuery插件，用JavaScript寫成。它會延遲在（長）網頁中加載圖像。在用戶滾動到它們之前不會加載在視口之外的圖像（網頁的可見部分）。這與圖像預加載相反。

來源

2010-06-15 03:53:58 artlung

jQuery圖像預加載/緩存停止瀏覽器

回答

相關問題