How can I make jquery load after all images loaded completed?

Question

I have a page full of images with different width and height. I need to get thire width. But jquery always make it before the images loaded. so the width of the image I got was a broken image width.

I tried $(document) and $(window), all faild. Anyone can help me?

Answer 1

You can either use $(window).load() which will fire only when everything is fully loaded. The main drawback is that any interactivity code (such as button clicks) are available only after everything is loaded. A better alternative is to just defer the image handling code using something like the imagesloaded plugin and use $(document).ready() for the rest of your code.