丢弃图片的 HTTP 请求

OS	Browser	""	null	remove	delete	stop	StopImage	Stop	Button	Timeout
Windows	IE6,7,8	√(e)	√(e)	II	×	×	×	×	×	21s (e)
/	FF4,5	II	II	II	×	II	×	×	II	21s (e)
/	Chrome12	×	×	×	×	II	×	×	II	21s (e)
/	Safari4,5	×	×	×	×	II	×	×	II	21s (e)
/	Opera9	×	√(e)	×	×	II	×	×	II	47s (e)
/	Opera11	II	√(e)	II	II	II	×	×	II	47s (e)
Mac OS X	Safari5	×	×	×	×	II	×	×	II	1.2m (e)
/	Chrome12	×	×	×	×	II	×	×	II	1.2m (e)
/	FF4,5	II	II	II	×	II	×	×	II	1m'15s (e)
Ubuntu	FF4,5	II	II	II	×	II	×	×		3m'9s (e)
/	Chrom(e/ium)12	×	×	×	×	II	×	×		3.2m (e)

Windows XP, Server 2003, 7.
Mac OS X 10.6.7
Ubuntu 11.04

标题注解：

"":: `img.src = ""`
null:: `img.src = null`
revmove:: `img.removeAttribute("src")`
delete:: `delete img["src"]`
stop:: `window.stop()`
StopImage:: `document.execCommand("StopImage")`
Stop:: `document.execCommand("Stop")`
Button:: Browser Stop Button.

图标注解：

√:: 能够 Abort 图片请求，并回调 (e)onerror/(a)onabort/(l)onload 函数。
II:: 能够 Abort 图片请求，但不触发任何事件进行回调。
≈:: 部分版本支持。如 Stop/StopImage 在 .NET Framework 3.0 中取消了支持。
×:: 不能 Abort 图片请求，或不支持该方法。

事件回调

1var img = new Image();
2img.onload = function(){out.innerHTML += "loaded.";};
3img.onabort = function(){out.innerHTML += "aborted.";};
4img.onerror = function(){out.innerHTML += "errored.";};
5window.setTimeout(function(){
6    out.innerHTML += "before.";
7    // abort.
8    img.src = null;
9    out.innerHTML += "after." + img.complete;
10}, 2000);

测试结果：

IE:: before.errored.after.
Opera:: before.after.errored.
FF:: before.after.
Chrome:: before.after.
Safari:: before.after.

TODO:丢弃 jsonp 请求？

为什么不是 script/link?

使用 document.createElement("script") 创建元素并设置 src 属性， appendChild 到 DOM 中会去请求指定资源，可以到底向日志服务器发送数据的要求。

但是使用这种方式有一下几点弊端：

创建脚本带来的危险性。
会向 DOM 中附加元素，影响 DOMLint 校验。
无法 abort，无论设置 script = null;, script.src="";, script.src=null;, script.removeAttribute("src");, document.body.removeChild(script); 都无法实现 abort.
引入资源不触发 onload/onerror/onabort 事件，除非使用 jsonp 的方式，对元素本身无法得到回调。

丢弃图片的 HTTP 请求#

事件回调#

TODO:丢弃 jsonp 请求？#

See Also#

丢弃图片的 HTTP 请求

事件回调

TODO:丢弃 jsonp 请求？

See Also