Katakanlah, pengguna membuka halaman, mengklik tombol, dan munculan dengan gambar muncul. Bagaimana cara mendeteksi ketika semua gambar telah dimuat? Saya tidak dapat menggunakan window.onload di sini, karena halaman telah dimuat dengan semua aset. Untuk memperjelas, saya ingin mencari tahu batas akhir dari popup.

Popup ditambahkan ke DOM seperti:

var popup = document.createElement('div');
popup.innerHTML = '...';
document.body.appendChild(popup);
0
x-yuri 11 Agustus 2017, 20:00

2 jawaban

Jawaban Terbaik

Berdasarkan jawaban ini. Semoga itu cukup.

var cons = document.querySelector('#console');
var popup = document.createElement('div');
popup.className = 'popup';
popup.innerHTML = _.range(10).map(function(i) {
    return '<img src="http://via.placeholder.com/50/50">';
}).join('');
document.body.insertBefore(popup, cons);
waitForImages(popup).then(function() {
    d('loaded');
})

function d(s) {
    var text = document.createTextNode(s);
    cons.appendChild(text);
    var br = document.createElement('br');
    cons.appendChild(br);
}

function waitForImages(el) {
    var images = document.querySelectorAll('img');
    return Promise.all(_.compact(_.map(images, function(img) {
        if (img.complete) {
            d('img.complete');
            return;
        } else
            return new Promise(function(resolve, reject) {
                img.addEventListener('load', function() {
                    d('onload event');
                    resolve();
                });
            });
    })));
}
.popup {
    overflow: hidden;
}
img {
    float: left;
    margin: 0 5px 5px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.5.0/bluebird.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<div id="console">
</div>
0
x-yuri 11 Agustus 2017, 20:02

Secara sederhana:

var image = document.getElementById('image');

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

setTimeout(function(){
    image.src = "http://lorempixel.com/500/500";         
}, 5000);
<img id="image" src="">

Lihat https://developer.mozilla.org/en-US /docs/Web/API/GlobalEventHandlers/onload dan Panggilan balik JavaScript untuk mengetahui kapan sebuah gambar dimuat untuk informasi lebih lanjut.

0
scramlo 11 Agustus 2017, 17:55