Показать изображение только после полной загрузки

Question

Я пытаюсь скрыть изображение до полной загрузки.

У меня есть 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'); 
}); 

Но, похоже, событие onload не работает. Я делаю это неправильно здесь?

Answer 1

Вы можете использовать

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

Answer 2

Проблема заключается в том, что вы звоните

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

перед элементом "ZoomIn" прилагается.

Если вы:

//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'); 
}); 

Он будет работать