Прелоадер изображений Javascript не показывает статус - PullRequest
Новая
       13

Прелоадер изображений Javascript не показывает статус

0 голосов
/ 03 апреля 2012

Я собрал предварительный загрузчик изображений, который работает нормально, но не работает обновление статуса после каждого загруженного изображения. Вместо этого все изображения загружаются, и «готово» (последняя строка) - единственное, что появляется. Это работает, когда я использую оповещение вместо команды innerHTML, но это, очевидно, бесполезно. Что я делаю не так? 

<div id="preloader">
<span id="preloader_status"> </span>
<script language="JavaScript">
    imageObj = new Image();
    images = new Array();
    images[0]="bigimage.gif"
    images[1]="anotherbigimage.gif"
    /* and so on */

    var i = 0;
    var o = (images.length);

    for (i=0;i<o;i++) {
        var status = (Math.round(100*(i/o)));
        imageObj.src=images[i];
        document.getElementById("preloader_status").innerHTML = status;
    }
    document.getElementById("preloader_status").innerHTML = "done";
 </script>
 </div>

Ответы [ 2 ]

1 голос
/ 03 апреля 2012

Чтобы показать прогресс загрузки изображения, вам нужно подключиться к событию onload для изображений, чтобы вы могли отслеживать, когда их загрузка фактически завершена. Изображения загружаются асинхронно, поэтому назначение .src только НАЧИНАЕТ загрузку изображения. Он не завершается до тех пор, пока не будет вызван обработчик onload. Из-за этого существующий код просто сразу покажет «выполнено», потому что он не отслеживает, когда изображения фактически загружаются.

Кроме того, вы последовательно присваивали новое значение .src тому же объекту изображения, который собирается прервать загрузку предыдущего изображения. Вам нужно создать новый объект изображения для каждого нового загружаемого изображения.

Вы можете исправить свой код следующим образом: 

<div id="preloader">
<span id="preloader_status"> </span>
<script language="JavaScript">
    var imageSrcs = [
        "bigimage.gif",
        "anotherbigimage.gif"
        /* and so on */
    ];

    function preloadImages(list, statusID) {
        var img, cnt = 0;
        var progress = document.getElementById(statusID);
        var preloads = [];

        for (var i = 0; i < list.length; i++) {
            img = new Image();
            img.onload = function() {
                ++cnt;
                var loadPercent = Math.round(100*(cnt/list.length));
                progress.innerHTML = loadPercent;
                if (cnt == list.length) {
                    progress.innerHTML = "done";
                }
            }
            img.src = list[i];
            preloads.push(img);
        }
    }

    preloadImages(imageSrcs, "preloader_status");
 </script>
 </div>
1 голос
/ 03 апреля 2012

Цикл for будет происходить практически мгновенно, поскольку изображения загружаются асинхронно;установка imageObj.src просто запустит запрос изображения и перейдет к следующему.Это не будет блокировать выполнение цикла.Это приведет к тому эффекту, который вы видите, то есть последняя строка кода выполняется сразу.

Я думаю, что вы ищете, это событие JavaScript Image onload, которое сработает, когда* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * НЕОБЫЧНЫЕ ”.

...