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图像预加载/缓存停止浏览器

回答

相关问题