仅在完全加载后显示图像答案

【问题标题】：Show image only after fully loaded仅在完全加载后显示图像
【发布时间】：2023-04-10 00:14:01
【问题描述】：

我正在尝试隐藏图像，直到它完全加载。

我有这个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 事件没有运行。我在这里做错了吗？

【问题讨论】：

您需要在加载图像而不是 html 时触发。看看这里：stackoverflow.com/questions/2392410/…

标签： jquery

【解决方案1】：

你可以使用

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

【讨论】：

【解决方案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');
});

会有用的

【讨论】：