闲耘
首页
博客
项目
我的诗
Vim
关于
首页
博客
项目
我的诗
Vim
关于
简体中文

丢弃图片的 HTTP 请求

\n

| OS | Browser | "" | null | remove | delete | stop | StopImage | Stop | Button | Timeout | |\n\n\n\n\n\n\n\n\n\n|\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n|\n\n\n\n\n\n\n|\n\n\n\n\n\n\n|\n\n\n\n\n\n\n\n|\n\n\n\n\n\n\n\n|\n\n\n\n\n\n|\n\n\n\n\n\n\n\n\n\n\n|\n\n\n\n\n\n|\n\n\n\n\n\n\n\n|\n\n\n\n\n\n\n\n\n\n\n\n| | 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) |

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

\n标题注解：\n

"":: `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.

\n图标注解：\n

√:: 能够 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 中会去请求指定资源，可以到底向日志服务器发送数据的要求。

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

  1. 创建脚本带来的危险性。

  2. 会向 DOM 中附加元素，影响 DOMLint 校验。

  3. 无法 abort，无论设置 script = null;, script.src="";, script.src=null;, script.removeAttribute("src");, document.body.removeChild(script); 都无法实现 abort.

  4. 引入资源不触发 onload/onerror/onabort 事件，除非使用 jsonp 的方式， 对元素本身无法得到回调。

See Also

\n https://stackoverflow.com/questions/930237/javascript\ncancel\nstop\nimage\nrequests \n https://www.sysopt.com/forum/archive/index.php/t\n177147.html \n https://stackoverflow.com/questions/1671717/javascript\nimage\nonabort\nevent\nnot\nfiring\nin\nfirefox\nchrome \n https://stackoverflow.com/questions/4506160/abort\nactive\nimage\nrequests \n https://www.devguru.com/technologies/ecmascript/quickref/image.html \n Javascript: Cancel/Stop Image Requests \n Can't you stop images from loading? \n window.stop() \n https://stackoverflow.com/questions/930237/javascript\ncancel\nstop\nimage\nrequests \n https://stackoverflow.com/questions/3146200/stop\nloading\nof\nimages\non\na\nhashchange\nevent\nvia\njavascript\nor\njquery \n https://developer.mozilla.org/en/DOM/window.stop \n execCommand \n execCommand Method \n https://msdn.microsoft.com/en\nus/library/ms536419%28v=vs.85%29.aspx \n https://msdn.microsoft.com/en\nus/library/ms533049%28v=vs.85%29.aspx \n https://developer.mozilla.org/En/Document.execCommand \n IE6下链接ONCLICK事件处理中的请求被ABORTED \n What does (Aborted) mean in HttpWatch? 来源 \n https://blog.httpwatch.com/2007/11/20/error\ninternet\ninvalid\nurl\nhttpwatch/ \n HttpWatch工具简介及使用技巧

大纲