Firefox 中“图像损坏或被截断”的处理方法

PLUGIN

我正在使用一个名为的 jQuery 插件lazyload https://github.com/tuupola/jquery_lazyload.

这是做什么的lazy加载图像 - 这意味着它不会在浏览器中渲染它们，直到图像位于视口范围内。

例如，当您的页面包含许多图像，并且您不希望它永远花费在初始加载上时，这非常有用。

FIREFOX

好的，所以我也在使用Firefox版本23.0.1

PROBLEM

该插件很棒，但是当在一些图像后向下滚动时，我开始收到图像无法加载的错误（只有一个用于损坏图像链接的通用占位符），并且在控制台中它logs:

Image corrupt or truncated: [image url]

并不是说形象有问题。它们单独渲染都很好。

它不在特定图像上，因为它是随机的。如果我再次加载页面，原来的图像corrupt现在可以加载，其他图像返回损坏的链接并记录corrupt在控制台中。

我四处寻找这个，似乎同时提取一个问题<img>src 标签。

可能应该在获取时设置延迟，但是您不能总是知道延迟应该是多长时间。如果一个图像比另一个图像大，它仍然可能发生冲突（具有静态延迟时间，而不是静态延迟时间）complete打回来）。

所以，我想请求：

a)如果有人知道解决方案（例如捕获错误发生时并重新触发加载图像功能）
b)如果有人可以提出一个$.extend()到上面的库（lazyload），它将创建一个回调函数并等待，直到所有活动的获取都完成complete在加载下一个之前（如果这是问题 - 我不确定是否是） 我不是 jQuery 忍者，所以我对代码有点迷失。我可以弄清楚，但它可能会很脏......
c)如果这不是问题，那么我将不胜感激有关如何解决此问题的一些指导

正如对此所建议的answer https://stackoverflow.com/questions/11928878/detect-image-corrupt-or-truncated-in-firefox与您类似的问题：

看来，当更改 img 标签的 src 属性时， Firefox 触发加载事件。这与 HTML5 是相反的 规范，其中说如果 src 属性改变，那么 任何其他已经在进行的提取都应该结束（火狐浏览器 做），并且不应发送任何事件。应发送加载事件 仅当提取成功完成时。所以我想说的是事实 您收到加载事件是 Firefox 的一个错误。

进而：

最好的选择可能是每次创建一个新元素 希望更改 src 属性。

这是有道理的。 里面lazyload代码中，您会发现这一部分，似乎是在图像加载时响应触发的滚动事件appear:

    /* When appear is triggered load original image. */
    $self.one("appear", function() {
        if (!this.loaded) {
            if (settings.appear) {
                var elements_left = elements.length;
                settings.appear.call(self, elements_left, settings);
            }
            $("<img />")
                .bind("load", function() {

                    var original = $self.attr("data-" + settings.data_attribute);
                    $self.hide();
                    if ($self.is("img")) {
                        $self.attr("src", original);
                    } else {
                        $self.css("background-image", "url('" + original + "')");
                    }
                    $self[settings.effect](settings.effect_speed);

                    self.loaded = true;

您可以放置​​一个 AND 运算符，后跟一些标志或函数返回，以验证最后一个图像是否已完全加载到该部分：

if ($self.is("img") && lastImageIsLoadde() === true) { /*pseudocode here*/

从而防止img src在正确时间之前被替换（因为settings.placeholder是脚本在滚动时取代要加载的图像的图像），看看它是否适合您。