控制图像加载顺序

我有几张尺寸完全相同，绝对彼此重叠的图像。它们都是透明的.gifs，但背景图像（具有最低z-index的图像）除外。在行为方面，背景图片总是停留在我的页面上。其他图像可以使用复选框打开或关闭。控制图像加载顺序

我的问题是当页面加载速度慢的连接。由于透明图像的尺寸较小，所以它们首先加载并呈现出不美观的外观，直到我的背景图像完成加载。

有没有办法控制图像加载的顺序，这样我的透明图像才会出现，直到背景图像完成加载？我不想减慢我的页面加载时间，似乎同步加载图像会这样做。

2010-11-20 kittyhawk

您可以使用图像对象的onLoad事件。类似这样的：

<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>

在这个例子中，我让警报让你看到如何加载前一图像时加载图像。

来源

2010-11-20 03:05:32

控制图像加载顺序

回答

相关问题