Question

我有几张尺寸完全相同但绝对位于彼此之上的图像。除了背景图像（具有最低z-index的图像）之外，所有这些都是透明的.gif文件。在行为方面，背景图像始终保留在我的页面上。其他图像可以使用复选框打开或关闭。

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

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

Answer 1

您可以使用图像对象的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>

在这个例子中，我让警告让你看看上一张图片加载后图像的加载方式。

控制图像加载的顺序

1 个答案: