Catch all images while page is loading
Is it possible to catch all images while the page is loading, before onload is triggered?
I would like to load all images after onload event with some ajax icon on backgrou开发者_开发百科nd.
You can execute arbitrary Javascript code in the page, without using the onload event: (see http://bytes.com/topic/javascript/answers/147703-there-any-call-before-body-onload)
<html>
<head>
<script>alert(0)</script>
</head>
<body onload="alert(2)">
... (content) ...
<script>alert(1)</script>
</body>
</html>
(Alert order: 0, 1, 2.)
Now, at the point of alert(1), you can use document.getElementsByTagName(), and select your img tags to do whatever you want with them. It's even possible to create a script that postpones loading of images until they should be in the visible scroll area. This is useful for huge lists with images.
However, a more easy solution would be to use CSS and apply a background-image on each img element.
Consider using transition elements, that can be replaced onload.
<a rel="image" href="path/to/img"><img src="loader.gif"></a>
Like embedding flash.
加载中,请稍侯......
精彩评论