使用jQuery lazyload 实现图片延迟加载

下载地址

使用说明

0. 准备工作

下载jQuery和lazyload 插件（地址如上）

1. HTML

引入jQuery库和lazyload插件

    <div id="imagesContainer"></div>
     <!--<img class="lazy" data-original="img/example.jpg" width="750" height="450">-->
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
     <script src="../../lib/jquery.lazyload.js"></script>

2. 编写JavaScript

  $(function () {

             var images = [
                 'https://unsplash.ict/750/450?image=55', // 错误的地址；不会返回图片
                 'https://unsplash.it/750/450?image=155',
                 'https://unsplash.it/750/450?image=255',
                 'https://unsplash.it/750/450?image=355',
                 'https://unsplash.it/750/450?image=455',
                 'https://unsplash.it/750/450?image=555',
                 'https://unsplash.it/750/450?image=655',
                 'https://unsplash.it/750/450?image=5'
             ],
             i = images.length,
             $container = $('#imagesContainer'),
             placerhold = '../layzr.js/placerhold.gif', // 图片未加载前显示的图片，若不设置，将默认显示灰色
             imgtemp;

             while (i--) {
                 imgtemp = images.shift();
                 $container.append('<img class="lazy" src="'+placerhold+'" data-original="' + imgtemp + '" width="750" height="450">')
             }

             $('img.lazy').lazyload({
                 effect: 'fadeIn'    // 自定义显示效果（jQuery effect）
                 , failure_limit: 10
                 , threshold: 200    // 当距离图片还有200像素的时候，就开始加载图片。
                 , event: 'scroll'
             });

             // 自定义触发事件
             // $("img.lazy").lazyload({ event: "click" });
         });

3.  一些注意事项

3.1 必须设置图片的大小（行内样式或外部CSS都可以），否则插件可能无法达到理想的效果

3.2 可以设置倒计时，在指定的时间后加载图片