Home > Developer > Web Develop
Effect preview: http://keleyi.com/keleyi/phtml/image/index.htm
How to use:
1. Import JS plugin
<script src= "Http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js" type= "Text/javascript" ></script>
<script src= "Http://keleyi.com/keleyi/phtml/image/jquery.lazyload.js" type= "Text/javascript" ></script >
2. Add the following JavaScript to your page:
$ ("img"). Lazyload ();
This will cause all images to delay loading.
Of course, there are several configuration items for the plugin to set up.
1. Change threshold
$ ("img"). Lazyload ({threshold:200});
Setting the threshold to 200 means load 200 pixels before the picture is seen.
2. Of course you can also trigger load picture events by setting placeholder pictures and custom events
Copy the code code as follows:
$ ("img"). Lazyload ({
PLACEHOLDER: "Img/grey.gif",
Event: "Click"
});
3. You can define some picture display effects by defining the effect parameter
Copy the code code as follows:
$ ("img"). Lazyload ({
PLACEHOLDER: "Img/grey.gif",
Effect: "FadeIn"
});
Lazyload (lazy Loading) technology is not only used to delay the loading of pictures in the Web page, but also for the data, Google reader and Bing image search will be
Lazyload technology application of the incisively and vividly;
Defects:
1. Conflict with Ajax technology;
2. Picture delayed loading, encountered high height of the picture, there will be a stop loading problem;
3. Write code not standardized students to note, regardless of why, if your page, the IMG tag height property is undefined, then I recommend you do not use Imagelazyload
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> picture delayed loading-ke keeper </title>
<script type= "Text/javascript" src= "Http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js" ></script>
<script type= "Text/javascript" src= "Http://keleyi.com/keleyi/phtml/image/jquery.lazyload.js" ></script >
<body>
jquery implementation of image delay loading effect
<a href= "http://keleyi.com/a/bjac/et551617.htm" target= "_blank" > Original </a><br/>
<br/>
<br/>
<br/>
<script type= "Text/javascript" charset= "Utf-8" >
$ (function () {
$ ("img"). Lazyload ({
Effect: "FadeIn"
});
});
</script>
</body>
jquery Plugin Image Delay loading example details (GO)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
