How to make image load when FULL image is loaded? Jquery

Question

I have tried using .load() and .ready()

My image is pretty big and when it loads, it loads in sections from top to bottom. Is there any way to make the image show up all at once when it is fully loaded and ready to be FULLY seen?

$('img.touch').hide();
$('img.touch').ready(function() {
$('img.touch').show();
});

The last thing I tried was that code up above... Any help would be great

Thanks

Answer 1

I first create an image object. Then I define it's onload function. Afterwards I set the actual image location. Please note this example sets the background image.

var img = document.createElement('img')
img.onload = function(){
    //image only loads when finished
    div.style.backgroundImage = 'url(' + imgLocation + ')'        
}
img.src = imgLocation

Answer 2

I could see a solution where you could do something like this:

$(document).ready(function () {
    $("img.touch").attr("hidden", true);

    $("img.touch").load(function () {
        $(this).attr("hidden", false);
    });
});

Answer 3

You may try this

Without using jquery:

<img src="some.jpg" style="visibility:hidden;" onload="this.style.visibility='visible';" />

with query:

$(document).ready(function(){
    $('img.touch').one('load',function(){
         $(this).css('visibility','visible');
    }).each(function(){
        if(this.complete)  $(this).trigger('load');
    });
});