Question

我动态添加图片，只是将img标签与动态源附加到现有div。但是，并非所有这些图像都会存在，我想隐藏那些图像，但事实并非如此。

我相信我可以使用load（）并在出错时设置一个隐藏功能，但是因为我添加它们，只需创建一个img标签，我真的不知道如何将我的jquery连接到它。

这是我的添加功能：

function GetImages() {
            $('#ImageContainer').empty();
            $('#ImageContainer').css("visibility", "visible");

            var regex = new RegExp("(.+?);", "g");
            var match;
            while (match = regex.exec($("#<%= HttpSources.ClientID %>").val())) {
                $('#ImageContainer').append('<div class="ImgBox"><img src="' +
                    match[1].format($("#<%= ItemNo.ClientID %>").val()) + '" class="Image" /></div>');
            }

            return false;
        }

它将带有img的div添加到另一个div中。

最初，我想做这样的事情，隐藏它们，但由于加载文档时div和图像不存在，我真的不知道如何将它连接起来。

$(document).ready(function() {
    $(".ImgBox").Next(".Image").load(function () {
        // ... loaded  
    }).error(function () {
        // ... not loaded
        $(this).hide();
    });
});

Answer 1

编辑：事实证明，浏览器不应该像应该的那样冒泡错误事件。因为事件冒泡是jQuery .live（）功能背后的机制，所以你的绑定事件不会触发。

作为替代方案，我建议您在添加事件时将事件附加到每个元素（或元素集）。

使用live（）将事件添加到加载页面时不存在的元素。

http://api.jquery.com/live/

e.g。

$(".ImgBox").Next(".Image")
  .live("load", function () {
    // ... loaded  
  }).live("error", function () {
    // ... not loaded
    $(this).hide();
  });

Answer 2

我讨厌回答我自己的问题，但这就是我最终的结果。

.live（）听起来很棒，但不幸的是，它不适用于img上的加载/错误。

相反，我发现了这个： http://www.sajithmr.me/javascript-check-an-image-is-loaded-or-not 这似乎给我一个方法来检查，如果图像被加载。添加完所有图像后，我将运行它们，并清理未加载的图像。

检查动态添加图像上的加载是否失败

2 个答案: