Wait for images to load and then execute all other code

Question

OK, I\'m losing my mind over this. I did read here at SO and google about it, I even have the preloader set (found here on SO), but none of the plugins/code I found helped me. <

Answer 1

You could display the image only once it is loaded like so :

<img src="hdimg.jpg" width="1920" height="1080" style="display:none;" id="img1">

<script type="text/javascript">
$('#img1').load(function(){
    $(this).css({'display':'block'})
});
</script>

Answer 2

I think what you're looking for is javascript:onLoad(), which gets called as soon as the browser finishes loading.

Answer 3

The waitForImages pluggin is an interesting one, but the solution can be achieved just with:

    var counter = 0;
    var size = $('img').length;

    $("img").load(function() { // many or just one image(w) inside body or any other container
        counter += 1;
        counter === size && $('body').css('background-color', '#fffaaa');
    }).each(function() {
      this.complete && $(this).load();        
    });

Answer 4

I have a plugin named waitForImages that lets you attach a callback when descendent images have loaded.

In your case, if you wanted to wait for all assets to download, $(window).load() may be fine. But you could do it a bit cooler with my plugin :)

var loading = $('#loading');

$('body').waitForImages(function()
{    
    loading.addClass('hidden');  
}, function(loaded, total)
{
    loading.html(loaded + ' of ' + total);

});

Answer 5

I believe the best jQuery option is to use the ajax get call:

$.get('image.png', {}, function(){
    // Do whatever you want here, this wont execute until image.png is preloaded
});

Answer 6

Instead of trying to preload, you could just execute your script on...

window.onload = function(){..}

That doesn't fire until all images have been loaded.