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

【问题标题】：How should I handle a missing image in my plugin?我应该如何处理插件中丢失的图像？
【发布时间】：2011-09-02 12:51:11
【问题描述】：

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

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

找不到图片时插件可以调用函数吗？

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

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

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

【问题讨论】：

标签： jquery jquery-plugins error-handling

【解决方案1】：

我会为错误条件添加一个特定的回调。

你已经有了这个：

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

您应该考虑将其更改为：

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

如果给定，您也可以使用“finishedSuccess”，以保持一致。

我喜欢这个有几个原因：

它分离了错误处理
您可以为成功或失败回调设置不同的参数集
您可以轻松地为不同的错误添加回调（在这种情况下不太可能）

请不要抛出异常。未捕获的异常将中断 JavaScript 执行。可能不是因为没有加载图像而您想要做的事情。

【讨论】：

【解决方案2】：

试试这个：（DOM 元素.complete var）

$('img').each(function(){
     if($(this).complete != 'true'){
          /* workarround here */
     }
})

提示：如果您发现某些图片未加载，您可以将网址替换为默认图片，说明“未找到图片”:)

【讨论】：

感谢您的回答，但我不确定它的相关性。
"如果图像没有加载到我的插件中，最好的处理方法是什么？"我试图回答你的问题，这似乎是最好的方法。在您的插件waitForImages 中使用.complete var 希望我能提供帮助。对不起我的英语不好。

【解决方案3】：

不错的插件:)

之后，我检查了你的代码，我会在这段代码之后出错：

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

希望有所帮助 :)

【讨论】：

【解决方案4】：

这听起来像是你想要使用 jQuery 的延迟对象的那种事情：http://api.jquery.com/category/deferred-object/。

基本上，这可以让您创建一个对象 (var x = jQuery.Deferred())。然后，您可以像向jQuery.ajax 对象一样添加完成、成功和错误处理程序，分别使用x.always(callback)、x.done(successCallback)、x.fail(errorCallback)。显然，将此类处理程序附加到内部 Deferred 对象的函数和/或属性的名称取决于您。

当您使用 x.resolveWith 和 x.rejectWith 解析延迟对象时，您可以将文本状态传递给这些处理程序，例如 jQuery.ajax，或者实际上是完成/错误图像的数量。

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

【讨论】：

【解决方案5】：

无论哪种方式，这都指出您可能应该将第 103 行的函数绑定到 error 和 load，并且可能应该接受该事件作为该函数的参数。否则，您将永远不会引发浏览器已完成其图像处理的标志。这可以像调用$(image).bind("load error", function(e) { allImagesLoaded++; ... }) 一样简单。在函数内部，您可以通过检查 e.type === "error" 来传递错误处理选项，例如引发失败的标志，并且需要在所有图像完成后执行错误回调。

您已经处理了一个选项对象。最好的办法是允许用户通过在该对象中添加其他选项来对错误事件进行回调。这将与其他常见插件和基本 jQuery 函数的方法一致。我建议考虑jQuery.ajax() 的回调模型。允许用户为success 指定回调，它在所有图像成功加载时执行，error 在遇到任何错误事件时允许不同的执行路径，以及complete 在所有图像触发其事件后执行，无论成功或失败。您可能还想添加一个回调选项以在单个图像失败后立即处理错误，尽管我不一定认为这符合插件的范围。除非它确实为功能增加了价值，否则不要让它膨胀。

【讨论】：