Detailed explanation of lazy loading of images in Javascript

This article mainly introduces relevant information about the detailed examples of delayed loading of images in Javascript. Here is a detailed explanation and usage of delayed loading and asynchronous loading. Friends who need it can refer to it

Detailed explanation of examples of delayed loading of images in Javascript

Function:Ensure the speed of page opening (if the page cannot be opened within 3s, it is considered a dead page)

Principle:

1) For pictures in the first screen content: First, give the corresponding area a default picture to occupy the position (the default picture needs to be very small, which can generally be maintained Within 5kb), when the first screen content is loaded (or a delay time can be given), then start loading the real picture

2) For pictures in other screens: also give a default picture Placeholder, when the scroll bar scrolls to the corresponding area, we start loading the real picture

Extension: Asynchronous loading of data: At first, only the data of the first two screens are loaded and bound, and the subsequent data is not Process, when the page scrolls to the corresponding area, re-request the data, and then bind the rendering data

First let the src in the img tag be empty, let imgdisplay:none; the background on the outside p Bind a background image to the image, and then wait for the page to load before loading the image;

Use a timer or window.onload event, and then bind the obtained url address to the element img tag. src; however, if the real image address obtained is the wrong src address, not only the console will report an error, but also a broken image/fork image will appear on the page, affecting the vision. The following is the processing event

 var oImg = new Image; //创建一个临时的img标签

 oImg.src = 真实的img的src地址

 oImg.onload=function(){ //-> 当图片能够正常加载

  img.src = this.src；

  img.syule.disolay = 'block'；

  oImg = null; //释放空标签

 }

Website performance optimization:

1. Minimize the number of requests to the server and "reduce HTTP requests"

2. Merge css/js files

3. Merge ICON images ->Sprite images/css script

4. Lazy loading of images

5. Asynchronous loading of data

6. On mobile On the other hand, what our country is doing is a simple promotional page, and we try our best to write css and js as inline

The above is the detailed content of Detailed explanation of lazy loading of images in Javascript. For more information, please follow other related articles on the PHP Chinese website!