У меня есть javascript, который использует много изображений, и я хочу загрузить их все, прежде чем пользователь начнет щелкать. Изображения немного большие, поэтому требуется некоторое время. Вот мой код:
startTest();
function preloadImages() {
console.log("preload images");
for(var i = 1; i <= 132; i++) {
var img = new Image();
images[i-1] = "images/"+i+".png";
img.src = images[i-1];
if(i == 132) {
img.load = doneLoading();
}
}
}
function doneLoading() {
console.log("done loading");
document.getElementById("laading").style.display = "none";
console.log("loading gone");
showReady();
}
function startTest() {
console.log("start test");
trialCount = 0;
document.getElementById("laading").style.display = "block";
preloadImages();
var hammertime = Hammer(document.body).on("touch", function(event) {
registerTouch(event);
});
startTestTime = +new Date();
console.log("end start test");
}
Как вы можете видеть, startTest()
, который вызывает предварительные изображения. Здесь проблема: когда я загружаю страницу в браузере, консоль javascript указывает, что была напечатана "done loading"
, однако вращающееся колесо на вкладке в браузере показывает, что веб-страница по-прежнему загружается...
Что здесь происходит? Как я могу выяснить, как все мои изображения будут загружены?
Вам нужно проверить каждую загрузку изображения, чтобы изображение загружалось последним. Проверьте использование переменной count (loaded
).
function preloadImages() {
var loaded = 0;
for(var i = 0; i <= 132; i++) {
var img = new Image();
images.push("images/"+(i+1)+".png");
img.src = images[i];
img.onload = function(){
loaded++;
if(!(loaded < 132)){
// all images have loaded
doneLoading();
}
}
}
}
Чтобы выполнить предварительную загрузку, вам нужно будет проверить complete
статус для каждого загружаемого изображения. Поскольку вы не можете заранее знать, сколько времени потребуется для загрузки каждого изображения (в зависимости от задержки или размера), вам придется реализовать таймер, который будет отслеживать complete
статус на каждом изображении.
Вот один из возможных алгоритмов:
var timer = null,
numImages = 132,
allImages = new Array;
function preLoadImages() {
document.getElementById('loadcaption').innerHTML = 'Loading images... ';
for (var i = 0; i < numImages; i++) {
var tmp = "images/" + i + ".png";
allImages[i] = new Image();
allImages[i].onLoad = imgOnLoad(tmp);
allImages[i].src = tmp;
}
timer = window.setInterval('checkLoadComplete()', 250);
}
function imgOnLoad(imgName) { window.status = 'Loading image... ' + imgName; }
function checkLoadComplete() {
for (var i = 0; i < allImages.length; i++) {
if (!allImages[i].complete) {
imgOnLoad(allImages[i].src);
document.getElementById('loadcaption').innerHTML = 'Loading images... ' + Math.round((i/allImages.length)*100,0) + ' %';
return;
}
}
window.clearInterval(timer);
document.getElementById('loadcaption').innerHTML = 'Completed.';
window.status = '';
}
Где loadcaption
- это простой элемент HTML, показывающий прогресс. (Вы также можете использовать анимированный gif для загрузки анимации).
Идея состоит в том, чтобы продолжать проверять complete
статус на каждом изображении, вызывая checkLoadComplete
таймером. Когда все изображения complete
(загрузка), цикл for
завершается, и таймер очищается.
Вы начинаете процесс предварительной загрузки, вызывая preLoadImages();
функция.
complete
свойство не обновлялось вовремя. Следовательно, моя страница показала предварительную загрузку как «законченную» на несколько секунд раньше срока. Так что мне пришлось ждать , явно проверяя complete
собственность. В противном случае ваш ответ идеально подходит. +1 за твой ответ конечно.
onload
вместоonLoad
...