Implementation of delayed image loading

Too many images in the page can delay the loading of images, greatly improving the page loading speed and user availability.

1. Some pages are too long or too wide. You can consider loading only images near the display area.

2. The image is not displayed in the window where it is located. For example, if you want to switch the Tab content or rotate the content, you must also consider loading images that are not displayed at a delay.

In the first case, we recommend that you use the jQuery. LazyLoad plug-in.

JQuery. LazyLoad. js plug-in is easy to use

Introduce js files to the page header

<Script src = "jquery. js" type = "text/javascript"> </script>
<Script src = "jquery. lazyload. js" type = "text/javascript"> </script>

Use delayed loading for all images

$ ("Img"). lazyload (); or use the selector to delay loading of some images as follows:

$ ("Img. lazy"). lazyload ();
$ ("# Contrainer img"). lazyload ();
$ (". Slideshow img"). lazyload ();
Set Sensitivity, that is, the distance from the boundary. The default value is 0.

$ ("Img"). lazyload ({threshold: 200}); set the point image

$ ("Img"). lazyload ({placeholder: "img/grey.gif"}); set image loading events: You can set all jQuery events or custom event names here.

$ ("Img"). lazyload ({
Placeholder: "img/grey.gif ",
Event: "click"
});
Set the image loading effect

$ ("Img"). lazyload ({
Placeholder: "img/grey.gif ",
Effect: "fadeIn"
});
To update detailed usage, go to the official http://www.appelsiini.net/projects/lazyload

In the second case, the image of the region content is hidden, and the above plug-in does not work. Here we can consider the following processing:
The labels are as follows:

Container. find ('img [data-src] '). each (function (){
$ (This). attr ('src', $ (this). attr ('data-src '))
. RemoveAttr ('data-src ');
});

It can be verified through HTML5.