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

问题描述

| 我已经编写了一个名为waitForImages的jQuery插件。基本上，它具有在图像加载后运行回调的功能。 我最近收到了一项功能请求，以某种方式使代码在下载图像时出错时通知。   找不到图片时，插件可以调用函数吗？ 我考虑添加一个额外的参数，可以检查图像是否成功下载。

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

如果未在我的插件中加载图片，最好的处理方式是什么？     

解决方法

我将为错误情况添加特定的回调。 您已经有这个：

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

您应该考虑将其更改为：

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

您也可以使用\“ finishedSuccess \”（如果已给出），只是为了使其保持一致。 我更喜欢这样做有几个原因： 它分离出错误处理 您可以为成功或失败回调使用不同的参数集 您可以轻松地为不同的错误添加回调（这种情况下不太可能） 请不要抛出异常。未捕获的异常将中断JavaScript执行。可能只是因为未加载图像而不想做的事情。     ,试试这个：（DOM元素

.complete

var）

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

提示：如果找到了一些未加载的图像，则可以用默认图像替换网址，说\'找不到图像\':)     ,不错的插件:) 之后，我检查您的代码，在这段代码之后将出现错误：

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的延迟对象用于以下方面的事情：http://api.jquery.com/category/deferred-object/。 基本上，这使您可以创建对象（

var x = jQuery.Deferred()

）。然后，您可以分别使用

x.always(callback)

，

x.done(successCallback)

，

x.fail(errorCallback)

向

jQuery.ajax

对象添加完成，成功和错误处理程序。显然，将此类处理程序附加到内部Deferred对象的函数和/或属性的名称由您决定。 当您使用

x.resolveWith

和

x.rejectWith

解析延迟的对象时，可以将文本状态传递给这些处理程序，例如jQuery.ajax，或者实际上是已完成/出错的图像数。 我认为此类功能最适合图像加载的整体完成/成功/失败，但是您也可以为每个图像单独使用相同的系统。调用插件时，您会将处理程序保留在本地对象中，并为遇到的每个图像创建一个新的延迟对象，然后将回调添加到此新的延迟对象中。     ,无论哪种方式，这都表明您可能应该将第103行的函数绑定到

error

和

load

，并应该接受事件作为该函数的参数。否则，您将永远不会引发一个标志，表明浏览器已完成其图像处理。这可以像调用ѭ19一样简单。在函数内部，您可以通过检查

e.type === \"error\"

转到错误处理选项，例如举起一个标志，该标志表示存在故障，并且在完成所有图像后需要执行错误回调。 您已经可以处理选项对象。最好的办法是允许用户通过在该对象中添加其他选项来对错误事件进行回调。这将与其他常见插件和基本jQuery函数的方法一致。我建议考虑使用

jQuery.ajax()

的回调模型。允许用户指定

success

的回调，当所有图像都成功加载后执行；

error

遇到任何错误事件时允许不同的执行路径；

complete

指定所有图像触发事件后执行的ѭ24，无论成功或失败。您可能还想添加一个回调选项，以便在单个图像失败后立即处理错误，尽管我不一定觉得这适合插件的范围。除非它确实为功能增加了价值，否则不要肿。