Lazyload. js combines jQuery framework to Implement Asynchronous image loading

The so-called asynchronous loading of images means you don't need to load all the images at a time. You can call it delayed loading and buffer loading.

See if you have such a requirement: There are a lot of images in an article. If you load all the images when loading the article, it will undoubtedly delay the loading speed and allow users to wait longer, I want to find a plug-in that allows a webpage to only load images in the browser's field of view. images that do not appear in the current range will not be loaded for the moment, and will be loaded gradually when the user slides the scroll bar. Lazyload is used to achieve this effect.

Lazyload. js is actually a plug-in of jQuery. Its full name is jquery. lazyload. js. You can see its role by looking at its name-that is, the meaning of lazy loading. Because it is written in javascript, it applies to all webpages, including Wordpress.

The usage I found in Tianyi's article is very simple. This section uses WordPress as an example.

To use lazyload, you must first load jQuery, which relies on jQuery to achieve the effect. As for jQuery, you don't have to download it. You can directly connect the jQuery files stored on the Google server and never worry about loss (of course, if tianchao completely blocks Google's day ......)

Package and download lazyload instances:Http://www.bkjia.com/down/html/29753.html

In addition to lazyload.js, the compressed package also contains a grey.gif image file. The function of this image is to display this image when the page is not loaded. Upload the JS file and image to your space, and add the code to the header. php file of your topic:

// Load jquery first
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
// Load lazyload again
<Script type = "text/javascript" src = "http://www.jo2.org/js/jquery.lazyload.js"> </script>
<Script type = "text/javascript">
JQuery (document). ready (
Function ($ ){
$ ("Img"). lazyload ({
Placeholder: "http://www.jo2.org/js/grey.gif", // The placeholder image before loading the image
Effect: "fadeIn" // effect of image loading (fade in)
});
});
</Script> after saving and uploading, you will find that when you pull down the scroll bar slowly, the image will be loaded one by one with a gradual effect, which is very friendly to the user experience. For more information, see this blog.

Link: http://www.jo2.org/106.html