Question

PLUGIN

我正在使用名为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

正如此answer所建议的那样与您的问题相似：

看来，在更改img标签的src属性时， Firefox会触发加载事件。这与HTML5相反规范，如果src属性改变则表示 任何其他正在进行的提取都应该结束（哪个Firefox 确保），并且不应发送任何事件。应该发送加载事件只有获取成功完成。所以我说的是这个事实你得到一个加载事件是一个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是脚本在滚动时将要加载的图像所代替的图像）并查看它是否适用于你。

如何在firefox

1 个答案: