Jquery 如何处理；“图像损坏或被截断”；在firefox中

插件

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

这样做的目的是

lazy

加载图像-这意味着在图像位于视口范围内之前，它不会在浏览器中渲染图像

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

火狐

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

23.0.1

问题

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

图像损坏或被截断：[图像url]

这并不是说图像有问题。他们各自都表现得很好

它不在特定的图像上，因为它是随机的。如果我再次加载页面，现在可能会加载

损坏的图像

，其他图像会返回断开的链接并在控制台中记录

损坏的

我四处搜索了一下，似乎对

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

因此，我想请求：

a）如果有人知道此问题的解决方案（例如在错误发生时捕获并重新触发加载图像功能）

b）如果有人可以向上面的库（lazyload）建议一个
$.extend（）
，该库将创建一个回调函数，并在加载下一个函数之前等待所有活动回迁
完成
（如果这是问题-我不确定是否是）
我不是jQuery忍者，所以我对代码有点迷茫。我可以弄明白，但可能会很脏…

c）如果这不是问题所在，那么我希望您能为我提供一些解决方法
我会首先检查您是否有lazyload库的更新版本。

目前v1.9.7是最新版本。这可能是他们已经修复的一个bug。
（更改日志：）

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

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

如果什么都不起作用，我会将html文档“剥离”到一个真正干净的版本，在这个版本中懒散的加载可以工作（只是本地主机测试，或者JSFIDLE之类的），然后一个接一个地放回各个部分。最终，您应该看到功能在哪里中断

对于jQuery v1.9.1和Lazyload v1.9.7，它应该只处理以下内容：

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

下面是一个用于测试的JSFIDLE：

也许Firefox就是问题所在。目前版本40是最新版本。也许你还安装了“beta”版本？或打开安全模式？
如本文所述，解决与您类似的问题：

似乎在更改img标记的src属性时，
Firefox触发加载事件。这与HTML5相反
规范，该规范指出，如果src属性发生更改，则
任何其他正在进行的提取都应该结束（哪一个是Firefox
不会），并且不应发送任何事件。应发送加载事件
仅当提取成功完成时。所以我想说事实
你得到一个加载事件是一个Firefox错误

然后：

最好的选择可能是每次创建新元素时创建一个新元素
希望更改src属性

这是有道理的。
在
lazyload
code中，您会发现这一部分，似乎是在图像加载时，响应触发
出现的滚动事件：

    /* 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;

这样可以防止
img src
在其正确时间之前被替换（因为
设置。占位符是脚本在滚动时代替即将加载的图像的图像），并查看它是否适合您。
检查浏览器控制台/开发工具中的网络选项卡。图像请求看起来如何？您从服务器接收到哪些头？p/s:
如果有人能向上面的库提议一个$.extend（）
。。。这不是工作原理。谢谢-我检查了网络选项卡，每个文件都被调用，并获得HTTP状态200代码。因此该文件存在。有些人成功，有些人失败。文件大小似乎并不特别重要。还有什么我要查的吗。。。你能在JSFIDLE中共享代码吗？很难预测是什么导致了这个问题。这个解决方案是基于这样一个想法，即每次视口作用域触发事件时，创建一个新的
标记对你来说是不可控制的。如果这不是问题，那么你应该考虑链接答案（如我认为你已经做过的）：谢谢。这或多或少为我指明了正确的方向。我认为真正的问题是Firefox如何处理一次打开的这么多图像标签的内存。因此，我将修改这段代码，以便当图像从视口中“消失”时，它会删除img本身（或类似的内容）。希望这会清除内存。我们会看到。。。Tks
if ($self.is("img") && lastImageIsLoadde() === true) { /*pseudocode here*/