<img> tags

All aspects of labeling

tags are one of the most important elements on a page. It's hard to imagine a page without a picture, so the page effect will be greatly compromised.

Any front-end engineer must be very familiar with the tag, after all, often deal with it. But do you really know all about it? If you can accurately answer the following questions about , then congratulations, this article you can no longer look down, or you can use scrutinized eyes to check this article.

• 1: What properties are required if tags are inserted on a page?

• What is the difference between HTML and XHTML in the question 2: tag?

• Question 3: Insert tags on one page, why is it best to use the height and width properties?

• Question 4: The Onload/onerror/onabort event of the tag, under what circumstances will it be triggered?

• Question 5: We generally know that when a picture request returns 404, the OnError event is triggered, and when the picture request returns 302, the OnError event is triggered? What about 304? What about 403? What about 500? The request timed out? Even when the return is 200, but the content is not a picture, it will trigger onerror?

• Question 6: Can I use JavaScript to get a response code for a picture request when the picture triggers the onerror event?

• Question 7: Do we generally know that the, tag can be used to initiate cross-domain requests, and do you write a piece of JavaScript code that correctly uses initiates cross-domain requests?

• Issue 8: Users can set the browser does not display pictures, especially on mobile devices, users in order to save traffic, often will do so, how to know whether the user is forbidden to browse pictures?

The question has been raised, which of the following can you answer? In fact, the answer to some of these questions is ambiguous, and I'm not sure that my answer is 100% accurate until I see the standards and do the tests myself.

Below, we analyze and answer each of the 8 questions above:

1: What properties are required if tags are inserted on a page?

The answer is SRC and alt.

Example: (this instance is excerpted from w3school:http://www.w3school.com.cn)

The src attribute specifies the URL of the image to be displayed, and the browser initiates an HTTP GET request for the URL.

The ALT attribute specifies an alternative text for the image that is displayed in the browser instead of the image when the image cannot be displayed or when the user disables the display of the image. Such as:

Compared with the SRC attribute, the alt attribute is more easily overlooked by designers and developers, and in fact, even in the home page of some large domestic portals (such as Sina and Sohu), we can find many tags without alt attributes. However, the author strongly recommends using this attribute in every image of the document, so that even if the image cannot be displayed, the user can still see some relevant information, which greatly improves the user-friendliness of the page.

What is the difference between HTML and XHTML in the question 2: tag?

(The answer is excerpted from w3school:http://www.w3school.com.cn)

The, tag does not have an end tag in HTML. For example:

In XHTML, the, tag must be properly closed.

In HTML 4.01, the "align", "border", "hspace", and "vspace" properties of the image element are deprecated. In the XHTML 1.0 Strict DTD, the "align", "border", "hspace", and "vspace" properties of the image element are not supported.

Question 3: Insert tags on one page, why is it best to use the height and width properties?

When you browse the Web, you may experience this situation: as the image on the page loads and displays successfully, the content on the page moves erratically, affecting your reading. This is because the image on the page does not have the height and width properties defined.

If the height and width properties of the image are not defined, then the browser needs to download the image first, then parse out the height and width of the image, and leave the screen space in the display window so that the browser will continually recalculate/adjust the layout of the page, in order to display each loaded image. This may delay the display of the document and cause the page to redraw.

Therefore, I recommend using the height and Width properties to specify the size of the image. This allows the browser to make room for the image before it is downloaded, speeding up the display of the document, and preventing the page from being redrawn by moving the contents of the document.

However, it is important to note that the image is not scaled by the height and width properties. If the image is scaled down by the height and Width properties, the user must download a large volume of images, even if the image looks small on the page. The right thing to do is to use the software to manipulate the image to the appropriate size before using the image on the web. of course, there are exceptions to this rule in practice, for example, I think that small scale image scaling should be allowed, and if the page needs to load the display of different sizes of the same image, because the browser will only request one image at a time, so it is recommended to use height and width property to scale the image.

Question 4: The Onload/onerror/onabort event of the tag, under what circumstances will it be triggered?

OnLoad: The event occurs immediately after the image is loaded.

OnError: Event is triggered when an error occurs during document or image loading.

Onabort: event occurs when an image load is interrupted. For example, the user clicks the browser's Stop button, or during an image download.

Although the above three sentences seem simple, there are actually many details that need further research, especially the onload and onerror events. The question of these details will be raised in question 5.

Question 5: We generally know that when a picture request returns 404, the OnError event is triggered, and when the picture request returns 302, the OnError event is triggered? What about 304? What about 403? What about 500? The request timed out? Even when the return is 200, but the content is not a picture, it will trigger onerror?

These problems require a hands-on test. The results of the experiment are shown in the following table:

Picture request	Type of event triggered	Ie	FireFox	Chrome
Returns 404	OnError	√	√	√
Returns 302, and jumps to the address as a normal picture	OnLoad The type of event that is triggered is not related to the original request, but to the jump address.	√	√	√
Returns 304, and the cache is in effect	OnLoad However, it is also important to note that if the cache does not exist, simply returning 304 will still trigger the onerror	√	√	√
Returns 403	OnError	√	√	√
Returns 500	OnError	√	√	√
Request timed out	OnError Returns 504	√	√	√
Returns 200, but the returned content is not a picture	OnError	√	√	√

Question 6: Can I use JavaScript to get a response code for a picture request when the picture triggers the onerror event?

Unfortunately, the browser vendor has not provided the relevant interface at this time.

Question 7: We generally know that the, tag can be used to initiate cross-domain requests, and do you write a JavaScript function that correctly uses initiates cross-domain requests?

The question seems simple, and you may soon be writing the following code:

1 function Setimagesrc () {2     var i = new Image (); 3     i.src = "Http://.../1.gif"; 4     i.onload = function () {5
   //do sth. 6     }; 7  8     i.onerror = function () {9         //Do sth.10     }11     i.onabort = function () {+/         /do sth.14     }15}

A new Image object is created in the code, and the onload, OnError, and onabort three event handlers are bound.

But in fact, the above code has a few problems, you can see how many?

1) Attribute src Assignment operation should be after event binding: Otherwise, it is possible that the picture has been loaded, but the event bindings have not yet completed. For example, in the code snippet above, if you add an alert (1) between the third and fourth lines, you can reproduce the situation.

2) in IE6, the above event binding code forms a circular reference to the--image object whose OnLoad property references an anonymous function object, and the anonymous function references the image object through its scope chain, which causes a memory leak in the IE6. Therefore, in the OnLoad anonymous function, you should dismiss the circular reference, the correct code is similar to:

1 i.onload = function () {2     //Do sth.3     4     i.onload = null;5     i = null;6}

3) in IE6, if the picture is a multi-frame gif, the onload event is triggered multiple times. Therefore, to avoid this situation, you also need to dismiss the event function in the OnLoad event handler:

1 i.onload = function () {2     //Do sth.3 4     i.onload = null;5     i = null;6}

Issue 8: Users can set the browser does not display pictures, especially on mobile devices, users in order to save traffic, often prohibit the display of pictures. So, how do you know if users are forbidden to browse pictures?

Note: The solution to this problem comes from Http://stackoverflow.com/questions/8379156/how-to-detect-if-images-are-disabled-in-browser, The author of the principles and code bugs to do a corresponding interpretation and repair.

In Firefox and Chrome, you can use the complete property of the image object to fix the problem: Set the Src property of the Image object to request a picture that does not exist, and when the browser suppresses the picture, the complete property of the Image object is true, otherwise, false.

In opera, you can also use the complete property of the image object, but unlike Firefox and Chrome, after setting the src of the image, it will always appear as false before onload.  However, we can set the src of the image to a special value: IMG.SRC = "data:image/gif;base64,r0lgodlhaqabaiaaaaaaap///ywaaaaaaqabaaacauwaow=="; This way, when opera disables the display of pictures, the complete property of image is false, otherwise true.

In IE, the complete property of image will always be false. So, however, we notice that when IE suppresses the display of pictures, the Onload/onerror/onabort event of the image object is not triggered. For this feature, we use the settimeout function, when the Onload/onerror/onabort event is not detected for a certain amount of time, it is considered that the browser suppresses the display of the picture.

The specific code is as follows:

 1 <script type= "Text/javascript" > 2 detectimageenabledmode ({3 ondetectimageisdisabled:function                 () {4 alert (' Disabled '); 5}, 6 ondetectimageisenabled:function () {7 Alert (' enabled '); 8} 9}); 10 11//used to detect whether the browser suppresses the display of picture 12//Parameter options:ondetectimageisdisabled, the callback function after the suppress picture is detected ; ondetectimageisenabled, the callback function after the display picture is detected. Detectimageenabledmode (options) {/*/define DISABLED/E  nabled actions */15 var actioncounter = 0;16 var enabledaction = options.ondetectimageisenabled | |                     function () {};17 var enaledactionrun = function () {if (actioncounter) 19 Return;20 actioncounter++;21 enabledaction ();}23 var disabl edaction = options.ondetectimageisdisabled | |              function () {};25 var disabledactionrun = function () {26   if (actioncounter) return;27 actioncounter++;28 disabledaction (); 29} */* Create image */32 var img = new Image (); var currenttime = (+n EW Date), if (Navigator.appName.indexOf (' Microsoft Internet Explorer ')! =-1) {//Ie35 img.onl Oad = I.onerror = I.onabort = enaledactionrun;36 37//attempt to access a nonexistent picture img.src = Currenttim E+ '. '                 +currenttime+ '? time= ' +currenttime;39//If the Onload/onerror/onabort event has not been triggered for a picture after 500 milliseconds, the browser is considered forbidden to display the picture 40  SetTimeout (function () {Disabledactionrun (); ();}else if (Navigator.appName.indexOf (' Opera ')! =-1) {//Opera44 IMG.SRC = "data:image/gif;base64,r0lgodlhaqabaiaaaaaaap///ywaaaaaaqabaaacauwaow==" + '? Time= ' +cu RRENTTIME;45 46//Disable picture display, img.complete==false47 if (img.complete){Enaledactionrun ();}else{50 Disabledactionrun (); 51 }52}else{//Firefox chrome safari53//Try to access a non-existent picture of img.src = Curre Nttime+ '. ' +currenttime+ '? time= ' +currenttime;55 56//Suppress picture display, img.complete==true57 if (img.complete) {5                 8 Disabledactionrun ();}else{60 Enaledactionrun (); 61 }62}63}64 </script>

At this point, I believe you have a further understanding of the image. In fact, there are many techniques associated with image that are not mentioned in this article, such as the lazyload of image. People in the actual programming can slowly contact and understand. In future articles, I will also continue to write some image-related articles according to the actual situation.

tags