How can I tell if a picture is loaded in HTML?
Add the onload event to the IMG image.
How can I tell if all the pictures in an interface are loaded?
Add the OnLoad event to all the pictures.
If there are 1000 pictures, how to bind the event?
We use event bubbling capture, the magical event bubbling capture in JS, and simply binding an event to the parent node is fine;(but there is a drawback)
This is a very important conclusion:
After my experiment, I found that the onload event after the IMG tag was loaded successfully does not bubble to his parent element or to the body node.
However, we can capture the success of the IMG tag loading by AddEventListener binding event capture;
The demo is as follows:
<HTML> <Head> <MetaCharSet= "Utf-8"/> </Head> <Body> <DivID= "Div0"> </Div> </Body> <Script> varDiv0=document.getElementById ("Div0"); Div0.innerhtml= ' ' + '' + ' '; Div0.addeventlistener ("Load", function(EV) {EV=EV||window.event; Console.log ("Picture Loaded successfully"); Console.log (Ev.target);
A lot of things can be done here, and now a picture has been loaded successfully},true) </Script></HTML>
Use the Addeventlitener binding event to be sure to have the last argument, true;
After testing the OnLoad event for audio and video using the same code we could not capture the demo as follows;
<HTML> <Head> <MetaCharSet= "Utf-8"/> </Head> <Body> <DivID= "Div1"> </Div> </Body> <Script>varDiv1=document.getElementById ("Div1"); Div1.innerhtml= '<audio src= "Http://www.w3school.com.cn/i/horse.ogg" controls= "Controls" > Your browser does not support the Audio element. </audio>'+ '<video src= "Http://www.w3school.com.cn/i/movie.ogg" width= "height=" controls= "Controls" >your Browser does not support the video tag. </video>'; Div1.addeventlistener ("Load",function(EV) {EV=EV||window.event; Console.log ("Audio Loaded successfully"); Console.log (Ev.target); },true) </Script></HTML>
Because the IMG tag loading success is only the capture phase, there is no bubbling phase, why?
Personally, if the onload event of the IMG tag is bubbling, the OnLoad event added to window or document will be executed multiple times, so the bubbling event is for the user level behavior of onclick, onmosueover, etc. But capturing the words can capture the browser or user's event! ~ !
Why is the listening img element loading complete? What is his use of the scene?
I used an iframe on some HTML pages in my project, the height of this iframe is set automatically according to the internal content, so I have to wait until window.onload to set a height for an iframe that can be external. Or, the height of the external iframe is set synchronously after each picture is loaded in the DOM.
The disadvantage of using Addeventlitener is that the browsers below IE8 and IE8 are not supported, so let's add the OnLoad event to the 1000 pictures ....
NONO
Source: http://www.cnblogs.com/diligenceday/
QQ: 287101329
Real-time capture of IMG with event capture is loading complete
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
