Controlling The Sequence of Image Loading
I have several images that are exactly the same size and absolutely positioned on top of one another. All of them are transparent .gifs with the exception of the background image (the one with the lowest z-index). Behavior-wise, the background image always stays on my page. The other images are able to be toggled on or off using checkboxes.
My issue is when the page loads on slowish connections. Since the transparent images are smaller in size, they load first and present an unattractive appearance until my background image is done loading.
Is there a way to contro开发者_开发问答l the sequence in which the images load so my transparent images don't appear until the background image is finished loading? I don't want to slow down my page load time in doing so and it seems like synchonously loading the images would do that.
You could use the onLoad event of the image object. Something like this:
<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>
In this example I let the alert to let you see how the images are loaded when the previous image gets loaded.
加载中,请稍侯......
精彩评论