jquery - 火狐浏览器中如何处理 "image corrupt or truncated"

Question

插件

我正在使用名为 lazyload 的 jQuery 插件.

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

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

火狐

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

问题

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

Image corrupt or truncated: [image url]

并不是图像有问题。它们单独渲染都很好。

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

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

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

因此，我想请求:

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

Answer 1

正如建议的那样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 运算符，后跟一些标志或函数返回，以验证最后一个图像是否已完全加载到该部分:

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

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