判断图片加载完成疑问

Question

DOM中的一个img元素
<img id="test" src="xxx">

要判断其是否加载完成，需要这样

var imgOjbect = new Image();
imgOjbect.src = test.src;
imgOjbect.addEventListener('load', fn, false);

那么这是不是意味着图片要被加载两次？

Answer 1

如果出于特殊需要，一定要写成LZ的例子那样， 确实是加载两次的
不过如果加载的图片是静态资源，第二次加载不会发出http请求，而是瞬间读取本地缓存完成加载的。
这样做不会有网络上的额外消耗，而对于本地资源的消耗也微乎其微。

常规的只加载1次的做法

<script>function fn() {...};</script>
<img id="test" src="xxx" onload="fn();">

或者

<div id="imgContainer"></div>
<script>
    var imgObject = new Image();
    imgObject.addEventListener('load', fn, false);
    imgObject.src = '/path/to/image';
    document.getElementById('imgContainer').appendChild(imgObject);
</script>

补充猜测一下为什么会有LZ那种写法，应该是基于下面这种方式改造而来

<img id="test" src="xxx">
<!-- some DOM nodes or scripts -->
<script>
    imgObject = document.getElementById('test');
    imgObject.addEventListener('load', fn, false);
</script>

这种情况，如果图片已经载入完毕，中间隔了一段时间，才执行到addEventListener这段代码的话，这个listener是不会被触发的，因为已经错过了load事件的时机。只有在addEventListener之后完成图片的载入，这个listener才会被触发。
因此需要重新load一个Image()，src指向需要判断是否load完毕的的src，而这次load无论前者是否加载完毕，都不会有额外网络开销，算是一种比较有意思的做法。

Answer 2

然而如果加載的資源沒有被緩存，或者緩存剛被刪掉了（在 iOS 上常見），加載兩次是難免的啦。

可能性不能從測試中得出，要用分析得出。只能說一般情況這樣寫沒什麼問題，但是還是不建議。

可以考慮改成

<img src="xxx" onload="foo()">

<script>
function foo() {}
</script>