Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use the jquery.lazyload plug-in, the article is very detailed, has a certain reference value, interested friends must read it!

Dynamic loading of pictures is nothing new, many large stations are in use, the advantage is obvious, mainly to save traffic (including servers and clients), to give users a better experience, can improve the speed of opening pages.

The principle is not complicated, the picture still uses the original img tag, src points to a default small image, such as loading, and then customize an img attribute to save the real image address. When the user accesses the picture location, change the value of the src to the value of the custom attribute through js control.

This function has now been made into many plug-ins. What I use is called jquery.lazyload. If you need it, download it directly from my station. This file is all you need, and of course you have to have jqeruy.

The use method is also very simple, the original img tag plus a data-original attribute to save the real image address, the example is as follows

The code is as follows:

All the img that needs to be dynamically loaded can be written like this. Jquery.lazyload only recognizes data-original,style or other attributes to write freely as needed.

Finally, initialize it in the jquery.ready event of the page

The code is as follows:

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

The above is all the contents of the article "how to use the jquery.lazyload plug-in". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.