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

An example of using a MySQL statement to find out the number of bytes occupied by various integers and their maximum and minimum values

Blog

HTML table tag tutorial (44): table header tag

A brief analysis of SpringBoot packaging and uploading to docker and implementing multi-instance deployment (IDEA version)

Recently a friend asked me if I have ever played ...

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

An example of using a MySQL statement to find out the number of bytes occupied by various integers and their maximum and minimum values

HTML table tag tutorial (44): table header tag

CSS realizes the scene analysis of semi-transparent border and multiple border

HTML form tag tutorial (1):

Markup Language - Phrase Elements

Vue.js application performance optimization analysis + solution

Solution to the lack of my.ini file in MySQL 5.7

MySQL 5.7.23 decompression version installation tutorial with pictures and text

A Deep Dive into JavaScript Promises

MySQL database introduction: detailed explanation of multi-instance configuration method

Recommend

8 commands to effectively manage processes in Linux

Detailed tutorial on downloading, installing and configuring the latest version of MySQL 8.0.21

Basic knowledge of load balancing and a simple example of load balancing using nginx

Getting Started: A brief introduction to HTML's basic tags and attributes

About the implementation of JavaScript carousel

Detailed tutorial on distributed operation of jmeter in docker environment

Detailed explanation of WordPress multi-site configuration under Nginx environment

The easiest way to reset mysql root password

A brief analysis of SpringBoot packaging and uploading to docker and implementing multi-instance deployment (IDEA version)

How to configure Nginx's anti-hotlinking

React+Antd implements an example of adding, deleting and modifying tables

The principle and implementation of js drag effect

A brief talk about JavaScript variable promotion

Detailed explanation of the reasons and solutions for Docker failing to start normally

Summary of various postures of MySQL privilege escalation