插件名称 用途 插件官网地址
fontawsome CSS图标插件 http://fontawesome.io
easyui 基于jQuery的用户界面插件集合 http://www.jeasyui.net
jqueryui 同上 http://jqueryui.com
Amaze ui 中国首个H5跨屏框架 http://amazeui.org
bootstrap 同上,应用最广泛,推荐 http://getbootstrap.com/2.3.2/
bxslider 一个jQuery插件内容滑块 http://bxslider.com
jquery.lazyload 图片延迟加载 http://www.appelsiini.net/projects/lazyload

bootstrap使用步骤

  1. 导入CSS
  2. 导入jQuery(2.0/1.12)
  3. 导入JS
  4. bootstrap模板

图片延迟加载

参数:

$(function(){

    $('img.lazy').lazyload({

        //container: $('.product-list'),   // 对指定标签对象内的图片实现效果，表示在此标签中滚动时，触发加载（注意：如果容器未设置height和overfload:auto，那么会默认加载所有图片）

        threshold: 100,                    //当图片顶部距离显示区域还有100像素时，就开始加载

        placeholder : "img/grey.gif",      // 图片未加载时，占位

        effect: "slideDown",               // 图片出现的效果，值有show(直接显示),fadeIn(淡入),slideDown(下拉)

        effect_speed: 1000,                // 效果出现的时间

        event: 'scroll',                   // 滚动滚轮时触发，可以是：click、mouseover等

        data_attribute: 'original',        // img标签中保存url的自定义属性，默认：data-original

        skip_invisible: true,              // 是否跳过已经隐藏的图片（display:none）

        failure_limit: 2,                  // 由于延迟加载是根据Dom从上到下执行

                                           // 如果遇到Dom位置在上，但是图片定位在下导致看不到，那么会以为之后的图片不在应用延迟加载

                                           // 此处的failure_limit用于限制如果出现N个【Dom位置在上，但是图片定位在下】才终止

        appear: function(){                // 当图片位置刚出现在视图时，触发此事件

            $(this).attr('src');

        },

        load: function(){                  // 当图片路径加载之后，触发此事件

            $(this).attr('src');

        }

    });

})

例子:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{

            margin: 0 auto;

        }

        .pg-header{

            height: 48px;

            background-color: #3b5998;

        }

        .w{

            width: 980px;

            margin: 0 auto;

        }

        .clearfix:after{

            clear: both;

            content: '.';

            visibility: hidden;

            height: 0;

            display: block;

        }

        .product-list .item{

            float: left;

            height: 240px;

            width: 184px;

            overflow: hidden;

            border: 1px solid red;

            padding: 5px;

        }

        .product-list .item .lazy{

            height: 200px;

            width: 184px;

        }

    </style>

</head>

<body>

    <div class="pg-header"></div>

    <div class="pg-body">

        <div class="w">

            <div class="product-list clearfix">

                <div class="item">

                    <img class="lazy" data-original="img/1.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/2.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/3.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/4.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/5.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/6.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/7.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/8.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/9.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/10.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/11.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/12.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/13.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/14.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/15.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/16.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/17.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/1.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/2.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/3.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/4.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/5.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/6.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/7.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/8.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/9.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/10.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/11.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/12.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/13.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/14.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/15.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/16.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/17.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/1.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/2.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/3.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/4.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/5.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/6.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/7.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/8.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/9.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/10.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/11.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/12.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/13.png"/>

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/14.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/15.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/16.png" />

                </div>

                <div class="item">

                    <img class="lazy" data-original="img/17.png" />

                </div>

            </div>

        </div>

        </div>

    <div class="pg-footer"></div>

    <script src="js/jquery-1.12.4.js"></script>

    <script src="js/jquery.lazyload.js"></script>

    <script>

        $(function(){

            $('img.lazy').lazyload({

                //container: $('.product-list'),   // 对指定标签对象内的图片实现效果，表示在此标签中滚动时，触发加载（注意：如果容器未设置height和overfload:auto，那么会默认加载所有图片）

                threshold: 100,                    //当图片顶部距离显示区域还有100像素时，就开始加载

                placeholder : "img/grey.gif",      // 图片未加载时，占位

                effect: "slideDown",               // 图片出现的效果，值有show(直接显示),fadeIn(淡入),slideDown(下拉)

                effect_speed: 1000,                // 效果出现的时间

                event: 'scroll',                   // 滚动滚轮时触发，可以是：click、mouseover等

                data_attribute: 'original',        // img标签中保存url的自定义属性，默认：data-original

                skip_invisible: true,              // 是否跳过已经隐藏的图片（display:none）

                failure_limit: 2,                  // 由于延迟加载是根据Dom从上到下执行

                                                   // 如果遇到Dom位置在上，但是图片定位在下导致看不到，那么会以为之后的图片不在应用延迟加载

                                                   // 此处的failure_limit用于限制如果出现N个【Dom位置在上，但是图片定位在下】才终止

                appear: function(){                // 当图片位置刚出现在视图时，触发此事件

                    $(this).attr('src');

                },

                load: function(){                  // 当图片路径加载之后，触发此事件

                    $(this).attr('src');

                }

            });

        })

    </script>

</body>

</html>

lazyload下载地址

最新文章

  1. MATLAB中绘制质点轨迹动图并保存成GIF
  2. Rxjava cold/hot Observable
  3. 简单的方式优化mysql
  4. 常用chrome插件推荐
  5. 基于selenium的pyse自动化测试框架
  6. 安装phonegap
  7. 每天的学习经验：SharePoint 2013 定义自己添加的产品清单。Callout菜单项、文档关注、SharePoint服务机端对象模型查询
  8. JMeter 怎么保存登录状态
  9. 【COCOS2DX-游戏开发之三四】cocos2dx 3.0 TableView特殊使用方法:滚动时不能选择等等
  10. nginx-push-stream模块源码学习（三）——发布
  11. 一个简易的服务框架lsf
  12. [LeetCode] Minimum Time Difference 最短时间差
  13. IDEA搭建基于maven的springboot工程
  14. 「HNOI2016」序列 解题报告
  15. Linux平台 Oracle 18c RAC安装Part3：DB配置
  16. 随笔 | 分布式版本控制系统Git的安装与使用
  17. Eclipse 刚检出的项目 Build path 的时候提示 No action available
  18. 简单的zip压缩和解压缩
  19. 2018.07.03 POJ 1279Art Gallery（半平面交）
  20. npm 更改为淘宝镜像的方法

热门文章

  1. python_面向对象——编程步骤
  2. [Ynoi2017]由乃的OJ
  3. 并发编程大师系列之：Synchronized的类锁和对象锁
  4. [bzoj 2693] jzptab & [bzoj 2154] Crash的数字表格 (莫比乌斯反演)
  5. jQuery相关方法7----各种事件和绑定事件
  6. Crontab 定时任务格式参数
  7. Atcoder ABC 141
  8. BZOJ1856[Scoi2010]字符串——组合数学+容斥
  9. Jenkins 更新 jenkins.war的方法
  10. Flask上下文源码分析（二）