无法在使用 .append() 添加的图像上调用 jQuery .error()答案

【问题标题】：Cannot call jQuery .error() on image added with .append()无法在使用 .append() 添加的图像上调用 jQuery .error()
【发布时间】：2012-11-04 20:53:46
【问题描述】：

应该是一个简单的 while 循环，附加一个图像并增加计数，直到 .error() 因为图像不存在而被触发。

问题是错误事件永远不会触发。目录中有三个图像，但页面只是无限加载，直到选项卡崩溃。在 html 中的图像上调用 .error() 有效，只有当我附加图像时才调用错误。

代码如下：

jQuery(document).ready(function($) {
    var images = 'load';
    var i = 1;

    while(images == 'load') {
        $('.images').append('<img src="window_0' + i + '.jpg" />')
            .error(function() {
                images = 'finished';
            });
        i++;
    }

});

如果我使用 while(i

这曾经可以通过 ajax 调用实现，但在我的 jQuery 版本（1.7.1

【问题讨论】：

您不能使用服务器代码获取文件计数吗？这可以作为变量传递给页面并与之对抗
您无法使用此解决方案解决该问题，因为调用错误回调是异步的。您的无限循环阻止浏览器处理任何其他回调，因此永远不会发生。此外，这种方法会浪费传输并且高度不可预测。
不幸的是，在这种情况下，服务器端代码不是一个选项（长篇大论）。关键是，循环不应该是无限的，因为它应该在附加第四个（不存在的）图像时结束，导致 .error() 触发。
设法最终解决了这个问题，而不是使用本机javascript：stackoverflow.com/questions/11144261/…

标签： javascript jquery error-handling while-loop

【解决方案1】：

这里有两个主要问题：首先，这里没有将错误事件绑定到 img，而是将其绑定到 $('.images')。

其次，javascript（大部分）是单线程的。即使图像加载可能发生在后台，在您的循环退出之前不会发生任何 javascript 事件处理，除非发生事件，否则它不会执行此操作，因此您有一个 catch-22。

这通过链接加载事件而不是等待错误事件来做类似的事情：

    var i = 1;
    var img;
    function next() {
        if (img) $('.images').append(img);
        img = document.createElement('img');
        $(img).load(next);
        img.src='window_0' + (i++) + '.jpg';
    }
    next();

【讨论】：