如何在 Firefox 中处理 "image corrupt or truncated"

Question

插件

我正在使用一个名为 lazyload 的 jQuery 插件。

这样做是 lazy 加载图像 - 这意味着它不会在浏览器中呈现图像，直到图像在视口范围内。

例如，当您的页面包含许多图像，并且您不希望它在初始加载时一直花费时间时，这很有用。

FIREFOX

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

问题

这个插件很棒，但是当在一些图像之后向下滚动时，我开始在图像未加载的地方出现错误（只有一个通用的占位符用于损坏的图像 link）并且在控制台中它 记录：

Image corrupt or truncated: [image url]

不是图片有问题。它们都可以单独渲染。

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

我四处搜索了一下，似乎同时获取 <img> src 标签存在一些问题。

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

因此，我想请求：

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

Answer 1

我会先检查您是否有更新版本的 lazyload 库。 https://github.com/tuupola/jquery_lazyload/blob/master/jquery.lazyload.min.js

目前 v 1.9.7 是最新的。这可能是他们已经修复的错误。（变更日志：https://github.com/tuupola/jquery_lazyload/blob/master/CHANGELOG.textile）

其次，您使用的是哪个jQuery版本？也许一个非常旧的 jQuery 和一个旧的 lazyload 库导致了这个问题？（或者可能是最新的 jQuery？）

如果没问题，也许你可以看看lazyload是如何启动的？您是否有 ajax-请求并重新启动延迟加载？（应该不会引起问题，但你永远不知道）。或者尝试不同的 doctype/html 结构？

如果没有任何效果，我会 'strip down' 将 html 文档转换为真正干净的版本，其中延迟加载有效（只是本地主机测试，或 jsfiddle 或其他东西），然后一个一个地放回部分。最终您应该会看到功能中断的地方。

使用 jQuery v1.9.1 和 Lazyload v1.9.7 它应该只适用于此：

$('.lazy').lazyload();

这是一个用于测试的 jsfiddle：http://jsfiddle.net/web_nfo/21qb88v1/

或者 Firefox 可能就是问题所在。当前版本 40 是最新版本。也许您还安装了 'beta' 版本？或者打开安全模式？

Answer 2

根据此 answer 对与您的问题类似的问题的建议：

It appears that when changing the src attribute of the img tag, Firefox fires a load event. This is contrary to the HTML5 specification, which says that if the src attribute is changed, then any other fetch already in progress should be ended (which Firefox does), and no events should be sent. The load event should be sent only if the fetch was completed successfully. So I'd say that the fact that you get a load event is a Firefox bug.

然后：

The best option may be to create a new element each time you wish to change the src attribute.

这是有道理的。在 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 运算符后跟一些标志或函数 return 来验证最后一张图像是否已经完全加载到该部分：

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

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

如何在 Firefox 中处理 "image corrupt or truncated"

How to handle "image corrupt or truncated" in firefox

firefox

jquery

lazy-loading

image

jquery-lazyload