JS Magic Hall: IMG Element loading behavior

First, preface

In the JS Magic Hall: jsdeferred Source Analysis, we understand that the IMG element load failure can be used as an optimization scheme for asynchronous execution of functions, this article intends to further explore the loading behavior of IMG elements.

Ii. related properties and events for resource loading

Resource loading is, of course, the src attribute that determines the location of the resource, along with the onload event and the onerror event where the resource is loaded successfully, and for ie5~10, there is one more The Onreadystatechage event and the readystate property associated with the event and the complete property .

onload event , which is triggered when the resource is loaded and resolved successfully (if a resource other than the image/* type is loaded, the resolution fails).

The onerror event is triggered when a resource is not found or the resolution fails.

The onreadystatechange event , which is triggered after the onload event.

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

The complete property , which indicates whether the resource for the IMG element was successfully parsed. The default is false,,onload when the event is 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 have different support levels and behaviors for each URI. Information about URIs can be consulted: URI Scheme, Uniform resource identifier.

Third, the experiment began

This experiment will create an img element and assign the following to its src attribute fsjohnhuang.png , :0 , empty string , blank string , //: 0 , javascript:void 0 and data:image/ Png,foo , and subscribes to the onload and onerror events of the IMG element, IE5~10 also subscribes to the onReadyStateChange event and organizes its behavioral features and event response delays 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 image fsjohnhuang.png is 12KB

Symbol Description:

n /A indicates that the column event does not fire.

SRC attribute value	Note	Chrome			FireFox			Ie5~11
		OnLoad Event	OnError Events	Note	OnLoad Event	OnError Events	Note	OnLoad Event	OnError Events	Ie5~10 On Ready State Change	Note
Fsjohnhuang.png	Valid URI, URI Auto-Complete is http://localhost : 9000/fsjohnhu Ang.png	First request delay is 2~5MS	N/A	1. initiating resource requests; 2. Due to caching of resources, subsequent requests to the same resource, the delay is 0~1ms	First request delay is 4~10ms	N/A	1. initiating resource requests; 2. Due to caching of resources, subsequent requests to the same resource, the delay is 0~1ms	First request delay is 3~9MS	N/A	Occurs after the OnLoad event	1. initiating resource requests; 2. Due to caching of resources, subsequent requests to the same resource, the delay is 0~1ms
: 0	Invalid URI, URI Auto-Complete is http://localhost : 9000/:0 If the IMG element In the render tree, The load will be displayed Failed.	N/A	Delay is 5~300+ms	1. Initiating a resource request	N/A	Delay is 16~60ms	1. Initiating a resource request	N/A	Initial request delay is around 16ms	N/A	1. initiating resource requests; 2. Due to caching of resources, subsequent requests to the same resource, the delay is 0~1ms
Empty string, ""	Invalid URI	N/A	Delay is 0~1ms	1. Do not initiate resource requests; 2. If the IMG element is in the render tree, the load failure is not displayed.	N/A	N/A	1. Do not initiate resource requests; 2. If the IMG element is in the render tree, the load failure is displayed.	N/A	Delay is 0~1ms	N/A	1. Do not initiate resource requests; 2. If the IMG element is in the render tree, the load failure is not displayed.
Blank string, ""	Invalid URI	N/A	Delay is 0~1ms	1. Do not initiate resource requests; 2. If the IMG element is in the render tree, the load failure is not displayed.	N/A	Delay is 16~60ms	1. initiating resource requests; 2. If the IMG element is in the render tree, the load failure is displayed.	N/A	The first time delay is about 14MS	N/A	1. initiating resource requests; 2. If the IMG element is in the render tree, the loading failure is displayed; 3. Due to caching of resources, subsequent requests to the same resource, the delay is 0~1ms
: 0	Invalid URI, auto-complete to http://:0/	N/A	Delay is 0~1ms	1. Do not initiate resource requests; 2. If the IMG element is in the render tree, the load failure is not displayed.	N/A	Delay is 0~1ms	1. Do not initiate resource requests; 2. If the IMG element is in the render tree, the load failure is displayed.	N/A	Delay is 0~1ms	N/A	1. Initiate resource request, but will be canceled by browser (No Server Hits); 2. If the IMG element is in the render tree, the load failure is displayed.
Javascript:void 0	Invalid JavaScript URI Scheme	N/A	Delay is 1~2ms	1. Initiate resource request, but will be canceled by browser (No Server Hits); 2. If the IMG element is in the render tree, the load failure is displayed.	N/A	Delay is 1~2ms	1. Initiate resource request, but will be canceled by browser (No Server Hits); 2. If the IMG element is in the render tree, the load failure is displayed.	N/A	N/A	N/A	1. Execute img.src= via JS "Javascript:void 0" will report an "Access Denied" exception. If SRC is set to Javascript:void 0 via $.html () or static HTML, the exception is not reported.
Data:image/png,f	Invalid data URI Scheme	N/A	Delay 0~1MS	1. Resource requests are not initiated; 2. If the IMG element is in the render tree, the load failure is displayed.	N/A	Delay is 1~2ms	1. Resource requests are not initiated; 2. If the IMG element is in the render tree, the load failure is displayed.	N/A	Delay 0~1MS	N/A	1. Resource requests are not initiated; 2. If the IMG element is in the render tree, the load failure is displayed.

The statistical data above shows that the same behavior in Chrome, FF, and IE is loaded with invalid Datauri Scheme. The delay is also relatively short and stable. So jsdeffered uses this approach to speed up asynchronous execution!

Iv. Summary

This is only the IMG element loading HTTP, JavaScript and data URI scheme, and so on, coupled with experimental methods and other issues, inevitably lead to statistical data is not comprehensive, if there is a mistake hope you correct, thank you.

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

V. References

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

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

JS Magic Hall: IMG Element loading behavior