如何处理“图像损坏或截断”在Firefox [英] How to handle "image corrupt or truncated" in firefox
问题描述
我正在使用名为 lazyload 。
这是懒惰加载图片 - 意味着它在图像处于视口范围内之前，不会在浏览器中呈现它们。
例如，当您有一个包含多个图像的页面时，
$ b FIREFOX
<好的，所以我也使用
Firefox 版本 23.0.1
这个插件很棒，但是当一些图片滚动后，我开始出现错误， t加载（只有一个通用的占位符，用于破碎的图像链接），并在控制台中记录：
Image corrupt or truncated：[image url]
这并不是说第th e图像。他们都单独罚款。
这是不是在一个特定的图像，因为它是随机的。如果我再次加载页面，那么 corrupt 的图片可能会立即加载，其他图片会返回一个断开的链接并记录 corrupt 在控制台中。
我周围搜索了这一点，似乎同时获取< img> src标记。
可能应该在提取时设置一个延迟，但是你不能总是知道延迟应该延长多长时间。如果一个图像大于另一个图像，它仍然可能会发生冲突（有一个静态的延迟时间，而不是一个完整的回调）。
因此，我想要求：
如果有人知道解决这个问题（比如发生错误时捕获并重新触发load image函数）
b）如果有人可以提出一个 $。extend （）添加到上面的库（lazyload）中，它会创建一个回调函数并等待所有活动的抓取都是 complete ，然后加载下一个这是问题 - 我不知道如果是）
我不是一个jQuery忍者，所以我有点遗失的代码。我可以弄明白，但它可能会很脏...
c）如果这不是问题，那么一些方向，我可以如何解决这个将不胜感激
解决方案正如这个建议
$ b
看起来，当更改img标签的src属性时，
Firefox会触发一个加载事件。这与HTML5
规范相反，它指出如果src属性被更改，则
任何其他正在执行的提取操作应该被终止（Firefox
），，不应发送任何事件。只有在取得成功的情况下，load事件才会被发送
。所以我会说，你得到一个加载事件
的事实是一个Firefox的错误。
然后：
最好的选择可能是在每次
希望更改src属性时创建一个新元素。 b $ b
这是有道理的。
在 lazyload 代码中，你会发现这一部分，这似乎是图像加载时，响应触发出现：
/ *当出现触发加载原始图像时。 * /
$ 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 ，函数（）{
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运算符，后跟一些标志或函数返回值，验证最后一个图像（$ img）&& amp;& amp; amp; amp;& amp; amp; amp; amp;& lastImageIsLoadde（）=== true）{/ *这里伪代码* /
因此防止了 img src 在正确的时间之前被取代（因为 settings.placeholder 是脚本所代表的形象在滚动时加载），看看它是否适合你。
PLUGIN
I am using a jQuery plugi called lazyload.
What this does is lazy load images - meaning it does not render them in the browser until the image is within the scope of the viewport.
This is useful when you have a page that has many images, for example, and you don't want it to spend forever with the initial load.
FIREFOX
Ok, so I am also using Firefox version 23.0.1
PROBLEM
The plug in is great, however when scrolling down after some images I start getting errors where the image doesn't load (just has a generic place holder for a broken image link) and in the console it logs:
Image corrupt or truncated: [image url]
It is not that there is a problem with the image. They all render fine individually.
It is not on a SPECIFIC image as it is random. If I load the page again, the images that were corrupt may load now, with other images returning a broken link and logging corrupt in the console.
I searched around for this, and it seems that there is some problem with simultaneous fetches for an <img> src tag.
Possibly there should be a delay set on the fetch, however you cannot always tell how long the delay should be. And if one image is larger than another, it could still conflict (with a static delay time, as opposed to a complete callback).
Therefore, I would like to request:
a) If anybody knows of a solution to this (such as catching when the error occurs and re-triggering the load image function)
b) If anybody can propose an $.extend() to the library above (lazyload) that would create a callback function and wait until all active fetches are complete before loading the next one (IF this is the problem - I am not sure if it is)
I am not a jQuery ninja so I am a little lost on the code. I could figure it out, but it would probably be dirty...
c) if this is NOT the problem, then some direction as to how I can solve this would be appreciated
As suggested on this answer to a problem similar to yours:
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.
And then:
The best option may be to create a new element each time you wish to change the src attribute.
Which makes sense.
Inside lazyload code, you'll find this one part, that seems to be when the image loads, responding to an scrolling event that triggers 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;
You can put an AND operator followed by some flag or fuction return that verifies if the last image is already fully loaded on that part:
if ($self.is("img") && lastImageIsLoadde() === true) { /*pseudocode here*/
thus preventing that img src gets replaced before its correct time (since settings.placeholder is the image the script takes stand in the place of the one about to be loaded when scrolling) and see if it works for you.
这篇关于如何处理“图像损坏或截断”在Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
