0

In our web application there is a div with several "items" in it.

Some items of this div are images. These images are loaded dynamically after the single page web app has been started.

On the "loaded" event of the image loading I start calculating the dimensions of every item (I also log the dimensions with console.log).

In some situations - although the images have been loaded - the size of some items are not as large as they should be, because the images are not "rendered" yet. They are already loaded, but not yet fully included into the DOM and visible.

Of course, when I wait for example 1 second after the "loaded" event to start the calculation, everything is fine, but this is no clean solution for me.

I need some "rendered" event, when I can start the calculation.

Thanks alot for any helpful information on that.

Edit:
I want to mention that the single page web application has already been started. And after this start the images get loaded.

Wolfgang Adamec
  • 8,374
  • 12
  • 50
  • 74
  • 1
    Please take a look at [this post](http://stackoverflow.com/questions/8262916/is-there-something-like-a-ready-event-when-an-image-in-html-is-loaded-and-render) – Alp Jul 09 '15 at 04:50

1 Answers1

0

Use this to wait until all the content has loaded before running your JavaScript:

$(window).load(function(){
    // your code here
});
Nitsew
  • 3,612
  • 1
  • 15
  • 20
  • Hello Nitsew! Please see my "edit" comment. I cannot use your ".load" because it is a single page web application and the image loading happens after the start. – Wolfgang Adamec Jul 09 '15 at 05:33
  • Maybe you can do something with the .complete JavaScript property. – Nitsew Jul 09 '15 at 06:09