Javascript - загрузка изображений

0

У меня есть 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", однако вращающееся колесо на вкладке в браузере показывает, что веб-страница по-прежнему загружается...

Что здесь происходит? Как я могу выяснить, как все мои изображения будут загружены?

Теги:
image

2 ответа

3
Лучший ответ

Вам нужно проверить каждую загрузку изображения, чтобы изображение загружалось последним. Проверьте использование переменной 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();

      }
    }
  }
}
Поделиться
  • 0
    Вы пробовали этот код? Я помещаю console.log (загруженный) прямо под загруженный ++, и он никогда не печатается ... хм. есть идеи?
  • 0
    Ой, попробуйте onload вместо onLoad ...
Показать ещё 2 комментария
0

Чтобы выполнить предварительную загрузку, вам нужно будет проверить 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(); функция.

Поделиться
  • 0
    Я чувствую, что это может быть излишним ...
  • 0
    Да, @shennan, для большинства практических целей это перебор. На самом деле, это основано на одном из моих предыдущих опытов, когда кэшированные изображения создавали проблему. Кроме того, в случае большого количества изображений complete свойство не обновлялось вовремя. Следовательно, моя страница показала предварительную загрузку как «законченную» на несколько секунд раньше срока. Так что мне пришлось ждать , явно проверяя complete собственность. В противном случае ваш ответ идеально подходит. +1 за твой ответ конечно.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню