WordPress Picture plugin image with scroll bar fade delay loading effect

In the other People's blog, often see some pictures of the blog site, pull the browser scroll bar, the blog images appear delay loading effects, that is, often said the site picture with the scrollbar fade effect, idle bar resource station after repeated search and help, finally in Kim inside someone with the answer. Thanks for the group of friends who gave me the search name. After finding it, it is of course immediate action, will be free bar station also add this special effect. The following describes the specific process:
Special effects Benefits:
1. Accelerate the page loading speed of WordPress site;
2. Non-abrupt picture fade way;
3. Simplified code, easy to operate maintenance, JS code only 1.6KB prerequisite is: Your station loaded jquery.js

Principle:
This special effect is a little more gorgeous and accelerated because it can tell if a visitor is looking at the current image, or if the reserved fill image is not loaded grey.gif, the real image address will be loaded when the visitor slides the mouse wheel or browses to the image location.
In other words, if the visitor opens your page instantly and then closes it instantly, the picture in the footer is not loaded, so why not?
Don't worry about the friendliness of the visitors, this effect will start loading the image as soon as the image is browsed.
Implementation method:
1. Download jquery.lazyload.js,grey.gif;
2. Put the above 2 files in a wordpress directory, or you directly outside the station call, of course, you can use the source file to find out which directory the site, haha
3. Add the following JS calling code in the header.php of the current topic, and make some changes, see the following section of the JS code. In addition, the $ ("img") section can limit which img in the page will take effect, such as changing to $ (". Content img").

<script type= "Text/javascript" src= "Change to your own path/jquery.lazyload.js" ></script><script type= "text/ JavaScript ">jquery" (document). Ready (function ($) {$ ("img"). Lazyload ({     placeholder: "Modify to your own path/grey.gif",     effect      : "FadeIn"}); </script>

Effect preview:
See this site any number of pictures page, with the scroll bar scrolling can be effective. such as: Http://www.xianba.net/guestbook

Click on the file mentioned in the download

Statement

This article by the Idle Bar original compilation, reprint please indicate source: http://www.xianba.net/1923.html

WordPress Picture plugin image with scroll bar fade delay loading effect