Application of dynamic image loading technology and use case of jquery.lazyload plug-in

Application example website http://www.uhuigou.net
Dynamic loading of images is nothing new. Many large websites are using it. The advantages are obvious. It mainly saves traffic (including server and client), provides better user experience, and increases the speed of page opening.
The principle is not complicated. The picture still uses the original img tag, and the src points to a default small picture, such as loading. Then customize an img attribute to save the real picture address. When the user visits the picture location, the src value is changed to the value of the custom attribute through js control.

This function has been made into many plug-ins. The one I use is called jquery.lazyload. If you need it, just download it from my website. This is the only file you need. Of course, you also need jquery.lazyload
The usage is also very simple. Add a data-original attribute to the original img tag to save the real image address. The example is as follows

Copy code

The code is as follows:

Just write this for all the imgs that need to be loaded dynamically. jquery.lazyload only recognizes data-original, style or other attributes. You can write them as needed. Finally, you need to initialize them in the jquery.ready event of the page.

Copy code

The code is as follows:

$(function() {$("img.lazy").lazyload();});

Okay, you’re done!

<<: How to set a fixed IP address for a VMware virtual machine (graphic tutorial)

>>: Tutorial on installing GreasyFork js script on mobile phone

Implementation of MySQL5.7 mysqldump backup and recovery

Application of dynamic image loading technology and use case of jquery.lazyload plug-in

Implementation of MySQL5.7 mysqldump backup and recovery

A designer complains about Hammer's official website again

How to convert Chinese into UTF-8 in HTML

How to implement MySQL bidirectional backup

CSS scroll-snap scroll event stop and element position detection implementation

How to set the select to be read-only and not editable and the select value to be passable

Pure CSS custom multi-line ellipsis problem (from principle to implementation)

Detailed tutorial on installing JDK1.8 on Linux

HTTPS Principles Explained

Example code of how to create a collapsed header effect using only CSS

Recommend

MySQL 8.0.21 installation and configuration method graphic tutorial

Example of horizontal and vertical centering of div sub-element using CSS

How to install Mysql5.7 in Centos6

How to quickly copy large files under Linux

Various types of MySQL indexes

Ideas for creating wave effects with CSS

How to install MySql in CentOS 8 and allow remote connections

How to install PostgreSQL and PostGIS using yum on CentOS7

Examples of vertical grid and progressive line spacing

Detailed explanation of the "/" problem when proxy_pass forwards according to the path path

WeChat applet implements countdown for sending SMS verification code

5 ways to achieve the diagonal header effect in the table

Zabbix's psk encryption combined with zabbix_get value

MYSQL Left Join optimization (10 seconds to 20 milliseconds)

Detailed explanation of MySQL cursor concepts and usage