图像元素的“完整”属性的工作原理如何？ [英] How exactly does an image element's `complete` property work?

问题描述

我对 <$ c的理解遇到了一个问题$ c>完成 属性。

我假设完成将是如果图像已经下载并正确解码，则 true

MDN说 ...

如果浏览器已获取图像，并且位于支持的图像类型被解码没有错误。

所以，我假设检查图像的完成属性在其加载事件触发之前将返回 false （图像尚未被抓取）。当在 jsFiddle 中隔离这一点时，我一直得到 true 在检查脚本元素之前的属性时，在关闭< / body> 标记之前。

我还实验更改了 src 属性，然后立即检查其完成属性。在图像下载之前，我可以在浏览器中看到完成回到 true （我在看它的进展通过Firebug中的 Net 面板）。

我期待的行为是正确的吗？有没有办法让我按照我的预期工作？

目前在Firefox 7.0.1中进行测试。这可能是Firefox的错误，但只有其他问题作为证据。

解决方案

我有答案，但你不会喜欢...

当使用 document.createElement 创建有问题的图像时，它可以正常工作。请参阅 http://jsfiddle.net/minitech/nmuQ8/

我发现这个工作原理是在创建一个测试以查看它是否不工作时，所以到目前为止，我没有办法告诉替换是否真的有必要，不幸的是。

I have ran into a bit of a problem with my understanding of the complete property.

I assumed complete would be true if the image has been downloaded and decoded correctly.

MDN says...

True if the browser has fetched the image, and it is in a supported image type that was decoded without errors.

So, I assumed that checking an image's complete property before its load event had fired would return false (the image has not been fetched). When isolating this in jsFiddle, I kept getting true when checking the property inside a script element just before the closing </body> tag.

I also experimented with changing the src attribute of the image and then immediately checking its complete property. I can see in the browser the complete is coming back as true even before the image has downloaded (I am looking at its progress via the Net panel in Firebug).

Is the behaviour I am expecting correct? Is there a way to get this to work as I expect?

Currently testing in Firefox 7.0.1. This may be a Firefox bug, but only have this other question as evidence.

解决方案

I've got the answer, but you're not going to like it...

When the image in question is created with document.createElement, it works. See http://jsfiddle.net/minitech/nmuQ8/

I discovered that this works while creating a test to see if it doesn't work, so so far I don't have a way to tell if the replacement is actually necessary, unfortunately.

这篇关于图像元素的“完整”属性的工作原理如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！