Как создать обратный вызов JavaScript для знания, когда изображение загружается?

Question

Как создать обратный вызов JavaScript для знания, когда изображение загружается?

120

javascript image callback loading

задан Ciro Santilli 新疆改造中心法轮功六四事件 1 April 2018 в 14:51

2 ответа

Другие вопросы по тегам:

javascript image callback loading

Похожие вопросы:

score 64 · Answer 1

Image.onload () будет часто работать.

Для использования его, несомненно, необходимо будет связать обработчик событий перед установкой атрибута src.

Ссылки по теме:

Mozilla на Image.onload ()

Использование В качестве примера:

<html>
<head>
<title>Image onload()</title>
</head>
<body>

<img src="#" alt="This image is going to load" id="sologo"/>

<script type="text/javascript">
window.onload = function () {

    var logo = document.getElementById('sologo');

    logo.onload = function () {
        alert ("The image has loaded!");        
    };

    setTimeout(function(){
        logo.src = 'http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png';         
    }, 5000);
};
</script>
</body>
</html>

score 20 · Answer 2

Можно использовать .complete свойство класса изображения JavaScript.

у меня есть приложение, где я храню много Объектов изображения в массиве, который будет динамично добавлен к экрану, и поскольку они загружаются, я пишу обновления другого отделения на странице. Вот фрагмент кода:

var gAllImages = [];

function makeThumbDivs(thumbnailsBegin, thumbnailsEnd)
{
    gAllImages = [];

    for (var i = thumbnailsBegin; i < thumbnailsEnd; i++) 
    {
        var theImage = new Image();
        theImage.src = "thumbs/" + getFilename(globals.gAllPageGUIDs[i]);
        gAllImages.push(theImage);

        setTimeout('checkForAllImagesLoaded()', 5);
        window.status="Creating thumbnail "+(i+1)+" of " + thumbnailsEnd;

        // make a new div containing that image
        makeASingleThumbDiv(globals.gAllPageGUIDs[i]);
    }
}

function checkForAllImagesLoaded()
{
    for (var i = 0; i < gAllImages.length; i++) {
        if (!gAllImages[i].complete) {
            var percentage = i * 100.0 / (gAllImages.length);
            percentage = percentage.toFixed(0).toString() + ' %';

            userMessagesController.setMessage("loading... " + percentage);
            setTimeout('checkForAllImagesLoaded()', 20);
            return;
        }
    }

    userMessagesController.setMessage(globals.defaultTitle);
}