JQuery plug-in lazyLoad. js for webpage image loading delay

When there are a lot of images in our webpage that need to be loaded, if we wait until the webpage is loaded, the webpage will be opened slowly and for a large webpage, many users may not care about the content. at this time, we also load all the images, which is not only a waste of time.

When there are a lot of images in our webpage that need to be loaded, if we wait until the webpage is loaded, the webpage will be opened slowly and for a large webpage, many users may not care about the content. at this time, we also load all the images, which is not only a waste of time, but also a waste of server resources, the ideal solution is to load a bit. Currently, you can use the lazyLoad. js plug-in of jQuery to implement delayed image loading.

1. LazyLoad plug-in introduction:

Lazy Load is a jQuery plug-in mainly used to delay image loading. For example, if an article has a lot of images, it takes a lot of time to download images. This plug-in will detect your scrolling situation. only when you want to see the image will it request to download the image from the background and display it. Using this plug-in, you can download images only when you need to display images. this reduces the server load and avoids unnecessary resource downloads. If a person does not read the following image, loading the following image is a waste.

2. Lazy Load plug-in principle

Modify the src attribute of the target img to the orginal attribute to interrupt image loading. Check the scroll status, and then restore and load the image with the src attribute of the img in the visible web page to create a buffer loading effect.

But now, many javascript experts have analyzed that this plug-in does not actually have a really slow loading effect. This is indeed the case. the official team has provided instructions and solutions.

Cause: in the new browser, even if you delete the src attribute controlled by Javascript, the browser will still load the image.

Solution: directly modify the HTML structure, add new attributes to the img tag, point the src attribute value to the placeholder image, and add the data-original attribute to point it to the real image address.

For example:

In this way, we need to analyze the advantages and disadvantages of the plug-in before deciding whether to use it.

Use the lazyLoad plug-in:

1. The output must be defined according to this structure.
2. It can save server resources and provide a good user experience.
3. If the image is large, it takes a long time to download the image when you scroll to the target location.

Do not use the lazyLoad plug-in:

1. Increase server pressure and waste system resources.

Whether to use or not depends on your actual needs. If you have fewer images, you do not need to use them. if you have more images, consider them. However, you may need to add this attribute to each img tag, which is a little effort-consuming. This plug-in is used on the developer's m blog, but it does not use the structure officially mentioned. it only requires a buffer loading effect.

3. Use of lazyload plug-in

Step 1: Load related files.

Obviously, lazyload is the jQuery plug-in, so we need to load jquery and this plug-in first. You can use the following code to load these files: