I can load an image when it is loaded, by doing:
<img style="display:none;" src="big3.jpg">
<script type="text/javascript">
$('img').load(function(){
$(this).css({'display':'block'})
});
</script>
But what I want is to load the div when all img is loaded, but this is not working, why? :
<div style="display:none;">
<img src="big3.jpg">
</div>
<script type="text/javascript">
$('div').load(function(){
$(this).css({'display':'block'})
});
</script>
As @Kolink said, divs don't load. This code will show the div when all the images inside the div have loaded. (untested)
var $images = $('div img');
var loaded_images_count = 0;
$images.load(function(){
loaded_images_count++;
if (loaded_images_count == $images.length) {
$("div").show();
}
});
<div>
elements don't load, images do. You want to listen for when the image loads, and then get the <div>
and show it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With