Html'deki bir görüntü yüklendiğinde ve oluşturulduğunda hazır bir olay gibi bir şey var mı?

Question

iPad için bir web görünümü uygulaması oluşturuyorum ve dizin dosyası ve bir dizi resim yüklenip oluşturuluncaya kadar bir açılış ekranı göstermek istiyorum.

Tüm resimler yüklendiğinde ve oluşturulduğunda bu açılış ekranının kaybolmasını istiyorum - böylece kullanıcı, önbelleğe alınmamış görüntülerin tipik görüntü yüklemesini ve oluşturulmasını görmez.

Görüntü işleme için tarayıcılarda yakalanan bir olay var mı, yoksa bunu yapabileceğim herhangi bir Javascript eklentisi var mı?

Answer 1

İki olay dinleyicisi DOMContentLoaded ve yüklenir. Tüm dosyalar, reklamlar ve resimler dahil olmak üzere tüm kaynaklardan yükleme işlemini tamamladığında yükleme etkinliği tetiklenir. Görüntüler indirme sırasında işlenir, bu yüzden aradığınız şey bu olmalıdır.

demo here

Answer 2

Her görüntü, .load() ekleyebilir ve daha sonra basitçe tüm görüntüleri bir değişken bildirerek yüklendiğinde kontrol edebilirsiniz bakın.

Answer 3

senin için dışarı yazacağım:

loadedImages = 0; 
timesChecked = 0; 
checkInterval = 500; 
maxLoadTime = 10000; // in miliseconds 
window.onload = function() { 
    for (var i = 0; i < document.getElementsByName('img').length; i++) { 
    document.getElementsByName('img')[i].onload = function() { 
     loadedImages++; 
    } 
    } 
    intervalID = setInterval("checkSplash()", checkInterval); 
} 

function checkSplash() { 
    timesChecked++; 
    if (loadedImages >= document.getElementsByName('img').length || timesChecked * checkInterval >= maxLoadTime) { 
    clearInterval(intervalID); 
    // hide splash screen 
    } 
} 

Enjoy :)

Aslında oldukça basit: [jQuery `hazır()` docs] Gönderen <img src=".." onload="alert('image 1 is loaded!')" />