Question

我写了一个名为 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);
}

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

Answer 1

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

你已经有了这个：

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

您应该考虑将其更改为：

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

如果给出，你也可以使用“finishedSuccess”，只是为了保持一致。

我更喜欢这个，原因如下：

它分离出错误处理
您可以为成功或失败回调设置一组不同的参数
您可以轻松为不同的错误添加回调（此情况不太可能）

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

Answer 2

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

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

提示：如果您发现某些图片未加载，您可以使用默认图片替换网址，说明“找不到图片”：）

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

希望有所帮助：）

Answer 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，或者确实已完成/错误图像的数量。

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

Answer 5

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

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

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

5 个答案: