0

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.

pimvdb
  • 151,816
  • 78
  • 307
  • 352
Somebody
  • 9,316
  • 26
  • 94
  • 142

2 Answers2

2

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.

Pindatjuh
  • 10,550
  • 1
  • 41
  • 68
  • Yea i know this tehnique, it's called lazy load. At what stage it's possible to do this "postpones loading of images" ? Thanks ;) As i understand images are rendered after DOM ready event? – Somebody Jul 26 '11 at 13:27
  • DOM ready is called when the complete page (including images) is rendered. (see http://api.jquery.com/ready/) – Pindatjuh Jul 26 '11 at 13:34
  • When i'm trying to remove images from stack document.getElementsByTagName('img') , half of them is undefined. I'm trying it at the bottom of the document, right before

    that's why i'm asking

     – Somebody Jul 26 '11 at 18:38
0

Consider using transition elements, that can be replaced onload.

 <a rel="image" href="path/to/img"><img src="loader.gif"></a>

Like embedding flash.

line-o
  • 1,885
  • 3
  • 16
  • 33