Show image only after fully loaded

Question

I'm trying to hide an image until it fully loads.

I've this jquery.

//Load image on click
$(document).on("click", '[data-item="zoomIn"]', function(){
     var url = $(this).parent().siblings('.largeImgUrl').val();
     $('.flickr-big-image').empty().append("<img class='hidden' id='zoomIn' src='"+url+"' >");
     $("#flickr-popup").modal('show');
});

//Show image            
$('#zoomIn').on('load', function(){
    $('#zoomIn').removeClass('hidden');
});

But it seems the onload event is not functioning. Am I doing it wrong here?

You need to trigger on the loading of the image and not the html. have a look here: http://stackoverflow.com/questions/2392410/jquery-loading-images-with-complete-callback — Daniel, Sep 03 '15 at 15:21

score 0 · Answer 1 · edited Sep 03 '15 at 16:35

0

You can use

$( document ).ready(function() {
    $('#zoomIn').on('load', function(){
        $('#zoomIn').removeClass('hidden');
    });
});

edited Sep 03 '15 at 16:35

andrewsi

10,807
132
35
51

answered Sep 03 '15 at 15:37

Rosenan

42
5

score 0 · Answer 2 · answered Sep 03 '15 at 16:40

The problem is that you are calling

$('#zoomIn').on('load', function(){
    $('#zoomIn').removeClass('hidden');
});

before the item "zoomIn" is appended.

If you do:

//Load image on click
$(document).on("click", '[data-item="zoomIn"]', function(){
     var url = $(this).parent().siblings('.largeImgUrl').val();
     $('.flickr-big-image').empty().append("<img class='hidden' id='zoomIn' src='"+url+"' >");

     $('#zoomIn').on('load', function(){
         $('#zoomIn').removeClass('hidden');
     });

     $("#flickr-popup").modal('show');
});

It will work

Show image only after fully loaded

2 Answers2