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

Question

我写了一个jQuery plugin，叫做waitForImages。它基本上提供了在图像加载时运行回调的功能。

我最近收到一个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”，如果有，只是为了保持一致。

我喜欢这几个原因：

1. 它的错误处理
2. 你可以有一组不同的成功或失败的回调参数
3. 您可以轻松地添加了不同的错误回调（分离出这种情况不太可能）

请不要抛出异常。未捕获的异常会破坏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()）。然后，您可以分别使用x.always(callback),x.done(successCallback),x.fail(errorCallback)将完成，成功和错误处理程序添加到jQuery.ajax对象中。显然，将这​​些处理程序附加到内部延迟对象的函数和/或属性的名称取决于您。

当您使用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一旦所有图像触发其事件（无论成功或失败）都会执行回调。您可能还想添加一个回调选项，以在单个图像失败后立即处理错误，但我不一定认为这符合插件的范围。除非它真正增加功能的价值，否则不要膨胀它。