Jquery Preload of big image

Question

How to load the page only when such image is loaded? The base does not work, type:

$('#IDdaImagem').on('load',function(){ 
})

is a background image, and okay with a jquery plugin to open in other resolutions, the backstretch, it uses a div with class backstretch, as I carry this background image with 2mb before the contents of the site?

i test this and work, but not the item that I give show, appearing at the time, it works only in the alert.

<script>
$('.backstretch img').load(function() {
    alert('done loading image');
    $("#corpo").show();
});
</script>

Answer 1

Your example makes me think you don't want to "preload" an image necessarily, but want to wait until the image has been loaded before running a script. You can use something like the waitForImages jQuery plug-in for this.

https://github.com/alexanderdickson/waitForImages

Answer 2

Try code given below:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

With Jquery plugin :

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();