Jquery 我应该如何处理插件中丢失的图像？

我写了一个叫做waitForImages的文章。它基本上提供了在加载图像时运行回调的能力

我最近收到了一封电子邮件，希望在下载图像时以某种方式通知代码

当找不到图像时，插件能否调用函数

我考虑添加一个额外的参数，可以检查图像是否下载成功

image.onerror = function() {
     eachCallback.call(img.element, allImgsLoaded, allImgsLength, true);
}

然后，用户可以检查最后一个参数，查看它是否为

true

，如果是，则加载图像时出错

不过我觉得这个主意很有味道。如果我以后想在那里添加一个额外的参数呢？图像下载成功与失败是否应调用相同的回调

然后，我考虑在找不到图像时抛出一个异常

throw new Error(img.src ' + does not exist');

然而，这不是灵活的捕捉，你需要像这样调用插件

try {
   $('body').waitForImages();
} catch (exception) {
    // Which image didn't load?
    alert(exception.message);
}

---

如果我的插件中没有加载图像，那么最好的处理方法是什么？

试试这个：（DOM元素

.complete

var）

---

提示：如果您发现一些未加载的图像，可以用默认图像替换URL，说明“未找到图像”：）

我会为错误情况添加一个特定的回调

您已经有了：

$('selector').waitForImages({
    finished: function() {
        ...
    },
    each: function() {
       ...
    },
    waitForAll: true
});

你应该考虑把它改成：

$('selector').waitForImages({
    finished: function() {
        ...
    },
    finishedError: function() {
        ...
    },
    each: function() {
       ...
    },
    eachError: function() {
       ...
    },
    waitForAll: true
});

您还可以使用“finishedSuccess”，如果给定的话，只是为了保持一致

出于以下几个原因，我更喜欢这样做：

它分离出错误处理

对于成功或失败回调，您可以有一组不同的参数

您可以轻松地为不同的错误添加回调（在这种情况下不太可能）

请不要抛出异常。未捕获的异常将中断JavaScript执行。可能仅仅因为没有加载图像，您就不想执行此操作。

尼斯插件：）

在检查您的代码之后，我会在这段代码之后放置错误：

image.onload = function() {
    allImgsLoaded++;
    eachCallback.call(img.element, allImgsLoaded, allImgsLength);
    if (allImgsLoaded == allImgsLength) {
        finishedCallback.call(obj[0]);
        return false;
    };
};

image.onerror = function() {
    errorCallback.call(img.element);
    return false;
}

当然，您需要引入一个新的回调函数，如

$('selector').waitForImages(function() {

    alert('All images are loaded.');

}, function(loaded, count) {

   alert(loaded + ' of ' + count + ' images have loaded.');
   $(this).addClass('loaded');

}, function(img) {
   alert('error');
});

希望有帮助

---

：）

这听起来像是您希望将jQuery的延迟对象用于的类型：

基本上，这允许您创建一个对象（

var x=jQuery.Deferred（）

）。然后，您可以将完成、成功和错误处理程序添加到

jQuery.ajax

对象中，分别使用

x.always（callback）

、

x.done（successCallback）

、

x.fail（errorCallback）

。显然，将此类处理程序附加到内部延迟对象的函数和/或属性的名称由您决定

当您使用

x.resolveWith

和

x.rejectWith

解析延迟对象时，可以将文本状态传递给这些处理程序，例如jQuery.ajax，或者实际上传递已完成/错误的图像数

---

我认为这样的函数最适合于映像加载的整体完成/成功/失败，但是您也可以对每个映像单独使用相同的系统。调用插件时，您应该将处理程序保留在本地对象中，并为遇到的每个映像创建一个新的延迟对象，将回调添加到此新的延迟对象。

无论哪种方式，这都指出您可能应该将第103行上的函数绑定到

error

和

load

，并且应该接受事件作为该函数的参数。否则，您将永远不会发出浏览器已完成图像处理的标志。这可以像调用

$（image）.bind（“加载错误”，函数（e）{allImagesLoaded++；…}）

一样简单。在函数内部，您可以通过检查

e.type==“error”

来传递错误处理选项，就像升起一个标志，表示出现了故障，并且在完成所有映像后需要执行错误回调

---

您已经对选项对象进行了处理。最好的做法是允许用户通过在该对象中添加其他选项来对错误事件进行回调。这与其他常见插件和基本jQuery函数的方法是一致的。我建议考虑

jQuery.ajax（）

的回调模型。允许用户为

success

指定回调，该回调在成功加载所有映像时执行，

error

在遇到任何错误事件时允许不同的执行路径，以及

complete

在所有映像触发其事件后执行，无论成功与否。您可能还想添加一个回调选项，以便在单个映像出现故障后立即处理错误，尽管我觉得这不一定适合插件的范围。除非它真的为功能增加了价值，否则不要夸大它。

谢谢你的回答，但我不确定它的相关性。“如果图像没有加载到我的插件中，最好的处理方式是什么？”我尝试回答你的问题，这似乎是最好的方式。使用

.complete

var在你的插件中

waitForImages

希望我能帮忙。对不起，我的英语不好。

$('selector').waitForImages(function() {

    alert('All images are loaded.');

}, function(loaded, count) {

   alert(loaded + ' of ' + count + ' images have loaded.');
   $(this).addClass('loaded');

}, function(img) {
   alert('error');
});