0

我动态地添加图像，只是将带有动态源的 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();
    });
});
4

2 回答 2

1

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

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

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

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

例如

$(".ImgBox").Next(".Image")
  .live("load", function () {
    // ... loaded  
  }).live("error", function () {
    // ... not loaded
    $(this).hide();
  });
于 2012-11-23T08:49:25.130 回答
0

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

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

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

于 2012-11-23T10:24:41.357 回答