18

插入

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

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

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

火狐

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

问题

该插件很棒，但是在某些图像之后向下滚动时，我开始收到图像未加载的错误（只有一个用于损坏图像链接的通用占位符）并在控制台中记录：

Image corrupt or truncated: [image url]

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

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

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

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

因此，我想请求：

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

4

2 回答 2

6

正如对与您类似的问题的答案所建议的那样：

似乎在更改 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脚本所采用的图像代替了滚动时即将加载的图像）并查看它是否适合您。

于 2015-09-17T18:09:36.710 回答
0

我会先检查您是否有更新版本的延迟加载库。 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 会导致这个问题？（或者也许是最新的 jQuery？）

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

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

使用 jQuery v1.9.1 和 Lazyload v1.9.7 它应该可以使用：

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

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

或者也许 Firefox 只是问题所在。当前版本 40 是最新版本。也许您还安装了“测试版”？还是开启安全模式？

于 2015-09-17T14:20:11.053 回答