Question

我正在使用此代码：

function CheckImage(a, i) {
    $("<img/>").one('load', function () {
        $("div.photos").append(this);
    }).attr('src',a).attr('data-photo', '0' + i);
}

检查图像是否存在。

作为一个例子：

Photo1 = 'https://imagebank.sportdirect.com/DIx.jpg_RB51,51,255,255,255,127/-/article/111108/111108-1200-01.jpg';
CheckImage(Photo1, '1');

它就像一个魅力，但有时当我在另一个屏幕内使用Ajax加载屏幕时，它会闪烁几次并打印图像4次而不是一次。

知道这是从哪里来的吗？

这是该页面的ajax调用：

$.ajax({
    url:'/change_item_detail?article=123',
    type:'GET',
    success: function(data){
        $("#left").html(data);
    }
});

然后在change_item_detail页面加载它：

Photo1 = '1.jpg';
CheckImage(Photo1, '1');
Photo2 = '2.jpg';
CheckImage(Photo2, '2');
Photo3 = '3.jpg';
CheckImage(Photo3, '3');
Photo4 = '4.jpg';
CheckImage(Photo4, '4');

UPDATE：

我发现它发射了两次。因此，通过4张图像检查，它有时会显示8张图像。有什么想法吗？ Bounty将在一分钟内添加。

Answer 1

第二个事件来自于.tipend（this）时插入的img。尝试在元素中添加一个类来标记已经处理过的类，然后在事件处理程序中检查它。

Answer 2

试试这个（模式）

        $(function() {
        function CheckImage(a, i) {
            return $("<img/>", {
              "src" : a,
              "data-photo" : "0" + i
            })
            .one("error load", function (e) {
              if (e.type === "error") {
                // if `error` `event` fired 
                // when `img`
                // `appendTo` `div.photos`,
                // `remove` `img` from DOM
                $(e.target).remove();
                console.log(e.type);
              } 
                // if no `error` `event`,
                // when `img`
                // `appendTo` `div.photos`,
                // `img` _not_ `remove` from DOM
                else {
                  console.log(e.type)
              };
             return false
            })
           .appendTo("div.photos");
        }; 

        var Photo1 = "https://imagebank.sportdirect.com/"
        + "DIx.jpg_RB51,51,255,255,255,127/"
        + "-/article/111108/111108-1200-01.jpg";

        CheckImage(Photo1, "1");
        })

jsfiddle http://jsfiddle.net/guest271314/9sK3q/

Answer 3

AJAX调用可能会重新发布

function CheckImage(a, i) {
    $("<img/>").one('load', function () {
        $("div.photos").append(this);
    }).attr('src',a).attr('data-photo', '0' + i);
}

码

我从技术上知道应该覆盖它，但是当每个网络浏览器都完成时，应该做什么;）

（我之前有类似的问题，原因是我的AJAX文件中包含了相同的JS文件，因此我的AJAX中发送了重复的代码，导致事情发生两次）

Answer 4

如果已设置src，则在绑定事件处理程序之前，事件将在缓存中触发。要解决此问题，您可以循环检查并根据.complete触发事件，如下所示：

$("img").one('load', function() {
  // do stuff
}).each(function() {
  if(this.complete) $(this).load();
});

$（＆＃34; <img/>＆＃34;）。one（＆＃39; load＆＃39;多次触发

UPDATE：

4 个答案: