这样做是懒加载图像 – 这意味着它不会在浏览器中渲染它们,直到图像在视口的范围内。
当您有一个具有许多图像的页面时,这是非常有用的,例如,您不希望在初始加载时永远花费。
FIREFOX
好的,所以我也使用Firefox版本23.0.1
问题
插件是好的,但是当一些图像之后滚动下来时,我开始收到图像无法加载的错误(只有一个通用的占位符用于断开的图像链接),并在控制台中记录:
图像损坏或截断:[image url]
这不是图像有问题吗?它们都单独渲染。
它不是在SPECIFIC图像上,因为它是随机的。如果我再次加载页面,损坏的图像现在可能会加载,其他图像会在控制台中返回损坏的链接并记录已损坏。
我搜索了这个,似乎有一个问题,同时提取一个< img> src标签。
可能应该有一个延迟设置在提取,但是你不能总是告诉延迟应该是多长时间。如果一个图像大于另一个图像,它仍然可能会发生冲突(具有静态延迟时间,而不是完整的回调)。
所以我想请求:
a)如果有人知道这个解决方案(比如发生错误时重新捕捉并重新触发加载图像功能)
b)如果任何人可以向上面的库(lazyload)提出一个$ .extend(),这将创建一个回调函数,并等待所有活动的提取完成,然后再加载下一个(如果这是问题 – 我不知道是否它是)
我不是一个jQuery忍者,所以我有点迷失在代码。我可以弄清楚,但可能会很脏?
c)如果这不是问题,那么我将如何解决这个问题的一些方向将不胜感激
解决方法
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代码,你会发现这一部分,似乎是在图像加载时,响应触发器的滚动事件:
/* 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是脚本在滚动时要加载的位置的位置),并且看看它是否适用于您。