IMG element Loading behavior detailed

Source: Internet
Author: User
Tags empty resource string valid

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



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.