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:<img class="lazy" src="http://bcs.duapp.com/uhuigou/loading.gif" data-original="http://bcs.duapp.com/uhuigou/201306200831326313.jpg" style="width: 100%; display: inline-block;"> 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
Recommend
Universal solution for MySQL failure to start under Windows system
MySQL startup error Before installing MySQL on Wi...
Explain TypeScript mapped types and better literal type inference
Table of contents Overview Using mapped types to ...
Web page text design should be like smart girls wearing clothes
<br />"There are no ugly women in the w...
Detailed explanation of Nginx log customization and enabling log buffer
Preface If you want to count the source of websit...
MySQL solution for creating horizontal histogram
Preface Histogram is a basic statistical informat...
Summary of Mathematical Symbols in Unicode
There are many special symbols used in mathematic...
MySql multi-condition query statement with OR keyword
The previous article introduced the MySql multi-c...
Solution to Ubuntu 18.04 not being able to connect to the network in VMware virtual machine
The solution to the problem that Ubuntu 18.04 in ...
How to install MySQL 5.7.28 binary mode under CentOS 7.4
Linux system version: CentOS7.4 MySQL version: 5....
XHTML Tutorial: XHTML Basics for Beginners
<br />This site’s original content, please i...
A brief discussion on value transfer between Vue components (including Vuex)
Table of contents From father to son: Son to Fath...
javascript realizes 10-second countdown for payment
This article shares the specific code of javascri...
Vue+spring boot realizes the verification code function
This article example shares the specific code of ...
How to use Vue3 to achieve a magnifying glass effect example
Table of contents Preface 1. The significance of ...
This article will show you the basics of JavaScript: deep copy and shallow copy
Table of contents Shallow copy Deep Copy Replenis...