控制圖像加載順序

我有幾張尺寸完全相同，絕對彼此重疊的圖像。它們都是透明的.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

控制圖像加載順序

回答

相關問題