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

Question

我写了一个jQuery plugin称为 waitForImages。它基本上提供了在图像加载时运行回调的能力。

我最近收到了 feature request以某种方式让代码在下载图像出错时发出通知。

Could the plugin call a function when an image is not found?

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

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);
}

如果图像未在我的插件中加载，处理问题的最佳方法是什么？

Answer 1

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

你已经有了这个:

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

您应该考虑将其更改为:

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

您还可以使用“finishedSuccess”(如果给出)，只是为了保持一致。

我更喜欢这个有几个原因:

1. 它将错误处理分开
2. 您可以使用一组不同的参数来表示成功或失败回调
3. 您可以轻松地为不同的错误添加回调(在本例中不太可能)

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