Geek Answers Handbook

Jquery div when loading all images

I can upload the image at boot by doing:

<img style="display:none;" src="big3.jpg"> <script type="text/javascript"> $('img').load(function(){ $(this).css({'display':'block'}) }); </script>

But I want to load the div when all img loads, but this does not work, why?

 <div style="display:none;"> <img src="big3.jpg"> </div> <script type="text/javascript"> $('div').load(function(){ $(this).css({'display':'block'}) }); </script>
+7
source share
3 answers

As @Kolink said, divs are not loading. This code will show the div when all the images inside the div are loaded. (Unverified)

 var $images = $('div img'); var loaded_images_count = 0; $images.load(function(){ loaded_images_count++; if (loaded_images_count == $images.length) { $("div").show(); } });
+16
source

<div> elements are not loading, images are executed. You want to listen when the image loads, and then get a <div> and show it.

+1
source

I know it's too late to answer this question, but for those who are looking at this topic, there is a simple and easy to use jQuery plugin with many other tricks to do this job. You can check it out here . then to check the download of the whole image you just need to do it

 $('#container').imagesLoaded() .always( function( instance ) { console.log('all images loaded'); })
0
source

More articles:


All Articles