在查看预加载脚本后,我发现该脚本在移动到下一个图像前不等待一个图像加载完成。我认为这就是导致您的浏览器挂起的原因 - 您实际上告诉浏览器同时加载了一百个图像。
更好的方式是使用递归函数,在第一个图像完成后才开始加载下一个图像。这里是我编写的一个简单示例。
编辑:此版本会导致堆栈溢出错误,请参见下面的新版本。
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);
};
我还想知道在有许多其他内容的完整网页上表现如何。请告诉我们它的表现如何。