IMG element Loading behavior detailed

We understand that the IMG element loading failure can be performed as a function of the optimization scheme asynchronous, this article intends to do a more in-depth study of the loading behavior of IMG elements.

Ii. related properties and events for resource loading

Resource loading is, of course, the SRC attribute of the resource location, followed by the OnLoad and OnError events for the success of the resource load, and for ie5~10, there is a Onreadystatechage event and the readystate attribute associated with the event and Complete property.

OnLoad event, which fires when the resource load completes and resolves successfully (parsing fails if the resource is not loaded with the image/* type).

OnError event that fires when no resource is found or parsing fails.

onReadyStateChange event, triggered after the onload event.

The ReadyState property, which represents the current resource mount state of the IMG element, the default value is "uninitialized", and the onload event is triggered to "complete" (the OnLoad event handler runs, readystate remains " Uninitialized ").

The complete property, which indicates whether the resource for the IMG element was resolved successfully. The default is the False,,onload event triggered to True (ReadyState remains false when the OnLoad event handler is run).

The SRC attribute, which specifies the resource location URI. The common URI format is http://..., https://..., javascript: ... and data:image/*,... 。 Different browsers differ in their support and behavior for different URIs. Information about URIs can be referred to: URI Scheme, Uniform Resource Identifier.

Iii. the beginning of the experiment

This experiment will create an IMG element and give its SRC attribute to the following fsjohnhuang.png,: 0, empty string, blank string,//:0, javascript:void 0 and Data:image/png,foo, and subscribe The onload and onerror events of the IMG element, IE5~10 also subscribe to the onReadyStateChange event, statistically collate its behavior characteristics and event response latency under IE5~11, Chrome and ff. The specific experimental statistics are as follows:

test Environment :

1. Test page address is http://localhost:9000/test.html

2. The size of the picture fsjohnhuang.png is 12KB

Symbol Description:

N/A indicates that the column event does not trigger.

because the resource is cached and subsequent requests for the same resource are made.

src attribute value	comments	Chrome	< Strong>firefox	ie5~11
onload event	OnError Event	remarks	onload event	onerror Event	remarks	onload event	onerror Event	ie5~10 on ready State change	remarks
fsjohnhuang.png	Valid URI, URI automatic completion is http://localhost : 9000/fsjohnhu ang.png	First request delay is 2~5ms	n/a	1. initiating resource requests; 2. Due to a cache of resources, subsequent requests for the same resource, the delay is 0~1ms	first request delay is 4~10ms	n/a	1. Initiate a resource request; 2. Due to caching of resources, subsequent requests for the same resource, the delay is 0~1ms	The first request delay is 3~9ms	n/a	> after the OnLoad event.	1. Initiate a resource request; 2. Due to a cache of resources, subsequent requests for the same resource, the delay is 0~1ms
: 0	Invalid URI, The URI auto-complement is http://localhost : 9000/:0 If the IMG element Is in the render tree, Displays a schematic of the load failure.	delay is 5~300+ms	1. Initiate a resource request	delay is 16~60ms	1. Initiating resource requests	n/a	The first request delay is around 16ms	n/a	1. initiate resource requests; 2. The delay is 0~1ms
empty string, "	invalid URI	n/a	delay is 0~1ms	1. Do not initiate a resource request; 2. If the IMG element is in the render tree, the diagram of the failed load is not displayed.	n/a	1. Do not initiate a resource request; 2. If the IMG element is in the render tree, show the diagram of the load failure.	delay to 0~1ms	n/a	1. Do not initiate a resource request; 2. If the IMG element is in the render tree, the schematic of the failed load is not displayed.
blank string, "   "	invalid URI	n/a	delay is 0~1ms	1. Do not initiate a resource request; 2. If the IMG element is in the render tree, the diagram of the failed load is not displayed.	n/a	delay is 16~60ms	1. Request to initiate a resource; 2. If the IMG element is in the render tree, show the diagram of the load failure.	n/a		n/a	1. Initiate a resource request; 2. If the IMG element is in the render tree, show the diagram of the load failure; 3.   Due to a cache of resources, subsequent requests for the same resource, the delay is 0~1ms
//:0	invalid URI, Automatically complements the http://:0/	time delay is 0~ 1ms	n/a	delay to 0~1ms	1. Do not initiate a resource request; 2. If the IMG element is in the render tree, display a schematic of the load failure.	delay to 0~1ms	N/A&NBSP;	1. Initiate a resource request, but it will be canceled by the browser (No Server Hits), 2. If the IMG element is in the render tree, display a schematic of the load failure.
javascript:void 0		n/a	The delay is 1~2ms	n/a	delay to 1~2ms	1. Initiate a resource request, but it will be canceled by the browser (No Server Hits), 2. If the IMG element is in the render tree, show the diagram of the load failure.	n/a	n/a	1. Perform img.src= "Javascript:void 0" via JS to report an "Access Denied" exception. If SRC is set to Javascript:void 0 by $.html () or static HTML, the exception is not reported.
Data:image/png,f	Invalid data URI Scheme	N/A	Delay 0~1MS	1. No request for resources will be initiated; 2. If the IMG element is in the render tree, show the schematic of the load failure.	N/A	Delay is 1~2ms	1. No request for resources will be initiated; 2. If the IMG element is in the render tree, show the schematic of the load failure.	N/A	Delay 0~1MS	N/A	1. No request for resources will be initiated; 2. If the IMG element is in the render tree, show the schematic of the load failure.

According to the above statistics, in Chrome, FF and IE in the same behavior is loaded invalid Datauri Scheme. The delay is also relatively short and stable. So jsdeffered uses this method to speed up the asynchronous execution!

Iv. Summary

Here only the IMG elements loaded HTTP, JavaScript and data URI scheme, and other experiments, coupled with the experimental methods and other issues, will inevitably lead to incomplete statistical data, if there are flaws I hope you will correct, thank you.

Respect original, reprint please specify from: http://www.cnblogs.com/fsjohnhuang/p/4148933.html ^_^ fat son John

V. Reference

http://www.w3help.org/zh-cn/causes/BX9021

Http://stackoverflow.com/questions/5775469/whats-the-valid-way-to-include-an-image-with-no-src