Catch all images while page is loading
Question
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 background.
2 answers
solution1
2 ACCPTED 2011-07-26 13:21:40
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.
solution2
0 2011-07-26 13:18:14
Consider using transition elements, that can be replaced onload.
<a rel="image" href="path/to/img"><img src="loader.gif"></a>
Like embedding flash.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.