Resim Yükleme Sırasını Denetleme

Tam olarak aynı boyutta ve birbirinin üzerine yerleştirilmiş birkaç görüntü var. Hepsi arka plan görüntüsü (en düşük z-endeksi olanı) hariç olmak üzere saydam .giflerdir. Davranış-bilge, arka plan görüntüsü her zaman sayfamda kalır. Diğer görüntüler onay kutuları kullanılarak açılıp kapatılabilir.Resim Yükleme Sırasını Denetleme

Sorun, sayfanın yavaş bağlantılarla yüklendiği zaman benim sorunum. Saydam görüntüler boyut olarak daha küçük olduğundan, önce arka plan resmim yüklenene kadar yüklenir ve çirkin bir görünüm sunarlar.

Görüntülerin yüklendiği diziyi kontrol etmenin bir yolu var, böylece arka plan görüntüsü yükleninceye kadar saydam resimlerim görünmez mi? Sayfamın yüklenme süresini yavaşlatmak istemiyorum ve görüntülerin eşzamanlı olarak yüklenmesi gibi görünüyor.

kaynak

2010-11-20 kittyhawk

Resim nesnesinin onLoad olayını kullanabilirsiniz. Böyle bir şey:

<html>  
<head> 

    <script type="text/javascript"> 
     function imageLoaded(imgId, url) { 
     alert(imgId); 
     var img = document.getElementById(imgId); 
     img.src = url; 
     } 
    </script> 
</head> 

<body> 
    <img id="bg" src="http://pupunzi.files.wordpress.com/2009/01/imgnav.jpg?w=350&h=285" alt="image" onLoad="imageLoaded('img1', 'http://forbiddenplanet.co.uk/blog/wp-content/uploads/2009/01/Adam%20Elliot%20Max%20and%20Mary%20animation.jpg');" /> 
    <img id="img1" onLoad="imageLoaded('img2', 'http://pupunzi.com/images/components/mb.imageNavigator.png');" alt="image 1" /> 
    <img id="img2" alt="image 2"/> 
</body> 

</html>

Bu örnekte ben önceki görüntü yüklenen aldığında resimler yüklendiğinde görelim için uyarıyı edelim.

kaynak

2010-11-20 03:05:32

Resim Yükleme Sırasını Denetleme

cevap

İlgili konular