Native javascript method to implement delayed loading of images_javascript skills

The example in this article describes how to implement delayed loading of images using native javaScript. Delayed loading of images actually has a jquery plug-in, and the loading method is very simple and reasonable. However, some friends felt that loading the jquery plug-in package was too big, so Yu Shi wrote one himself and shared it with you.

First of all, delayed loading of images can save our bandwidth and provide a better user experience, especially for sites with many images. This is very important. Let’s discuss the principle and implementation code of delayed loading of images. .

Principle of delayed loading of images

The principle of delayed loading of images is that the image src in HTML is not the real image address, but the image address is assigned to the img tag with a custom attribute, such as: src="img/loading.gif ” data-url="img/1.jpg", and then use js to determine the browser scroll bar event. When reaching a certain point, assign the real address of the image in the custom attribute to the src of the current img tag, thereby realizing dynamic image processing. show. In a real project, the addresses of these images can be passed through ajax and assigned to the custom attributes of img.

Example of delayed loading of images using native JS:

The text content seems a bit boring after all. I wrote a simple demo and now post all the code. Friends who need it can copy it directly and understand it after looking at the code.

Copy code The code is as follows:

希望本文所述对大家的javascript程序设计有所帮助。