После просмотра этого сценария предварительной загрузки выясняется, что сценарий не ожидает загрузки одного изображения, прежде чем перейти к следующему. Я полагаю, что именно это заставляет ваш браузер зависать - вы по сути говорите браузеру загружать сотню изображений одновременно.
Лучшим способом было бы использовать рекурсивную функцию, чтобы начать загрузку следующего изображения только после того, как первое будет сделано. Вот простой пример, который я собрал.
Редактировать: это вызывает ошибки переполнения стека, см. Новую версию ниже.
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);
};
Мне по-прежнему любопытно, как это будет происходить с точки зрения производительности на полной веб-странице, где происходит множество других вещей. Дайте нам знать, как это происходит.