如何在firefox中处理"图像损坏或截断"

Question

插入

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

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

例如,当您拥有包含许多图像的页面时,这非常有用,并且您不希望它在初始加载时永久消耗.

FIREFOX

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

问题

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

Image corrupt or truncated: [image url]

并不是图像有问题.它们都可以单独渲染.

它不是SPECIFIC图像,因为它是随机的.如果我再次加载页面,corrupt现在可能加载的图像,其他图像返回断开的链接并登录corrupt控制台.

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

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

因此,我想要求:

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

Answer 1

正如对此问题的回答所建议的那样:

似乎在更改img标记的src属性时,Firefox会触发加载事件.这与HTML5规范相反,HTML5规范说如果更改了src属性,那么任何其他正在进行的提取都应该结束(Firefox会这样做),并且不应该发送任何事件.只有在成功完成提取时才应发送load事件.所以我要说你得到一个加载事件的事实是一个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脚本在滚动时代表要加载的图像的位置),看看它是否适合你.