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

项目前的

＆＃34; zoomIn＆＃34;附上。

如果你这样做：

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

它会起作用

仅在完全加载后显示图像

2 个答案: