Detailed explanation of the delayed loading example of Javascript image
effect:Ensure the speed of opening the page (if you cannot open the page within 3 seconds, it is already considered a death page)
principle:
1) For pictures in the first screen content: first give the corresponding area a default image to occupy the position (the default image needs to be very small, and can generally be maintained within 5kb). After the first screen content is loaded (or you can also give a delay time), then start loading the real picture.
2) For other pictures on the screen: it also gives a default image placement. When the scroll bar scrolls to the corresponding area, we start loading the real image.
Extension: Asynchronous loading of data: At the beginning, only the data loading of the first two screens is bound, and the data behind is not processed. When the page scrolls to the corresponding area, the data is requested again and then the rendered data is bound.
First, let the src in the img tag be empty, and let imgdisplay:none; bind a background image to the background image on the outside div, and then wait until the page is loaded, load the image;
Use a timer or event, and then bind the obtained URL address to the src on the element img tag; however, if the obtained real image address is the wrong src address, not only will the console report an error, but the page will also have broken images/fork images, affecting the vision. The following is the processing event
var oImg = new Image; //Create a temporary img tag
= Realimgofsrcaddress
=function(){ //-> When the image can be loaded normally
= ；
= 'block'；
oImg = null; //Release empty tag
}
Website performance optimization:
1. Minimize the number of requests to the server side "reduce HTTP requests"
2. Merge css/js files
3. Merge ICON pictures->Sprite pictures/css script
4. Latency loading of pictures
5. Asynchronous loading of data
6. On the mobile terminal, what my country does is a simple publicity page, and try to write css and js into embedded
The above is an explanation of the delayed loading of Javascript images. If you have any questions, please leave a message or go to the community of this site to communicate and discuss together. Thank you for your reading. I hope it can help you. Thank you for your support for this site!