<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin: 0; } ul { margin: 0; padding: 0; list-style: none; } img{ border: none; vertical-align: middle; } </style> </head> <body> <ul class="list"> <li><img class="lazy" alt="" width="640" height="480" data-original="img/img1.gif" /></li> <li><img class="lazy" alt="" data-original="img/img2.gif" /></li> <li><img class="lazy" alt="" data-original="img/img3.gif" /></li> <li><img class="lazy" alt="" width="640" height="480" data-original="img/img4.gif" /></li> </ul> <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="js/lazy.min.js" ></script> <script> $(function() { // load by default //$("img.lazy").lazyload(); // Early loading when 200 pixels from the screen // $("img.lazy").lazyload({ // threshold : 200 // }); //click to load // $("img.lazy").lazyload({ // event : "click" // }); //load the fade-in effect $("img.lazy").lazyload({ effect : "fadeIn" }); }); </script> </body> </html>
Effect picture: