插件名称 用途 插件官网地址
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下载地址

jQuery前端插件以及图片延迟加载的更多相关文章

  1. jquery.lazyload插件实现图片延迟加载

    jquery.lazyload是一个实现图片延迟加载的jQuery 插件,它可以延迟加载长页面中的图片.在浏览器可视区域外的图片在初始状态下不会被载入,直到用户将页面滚动到它们所在的位置. 1.引入j ...

  2. jquery.lazyload插件实现图片延迟加载详解

    什么是LazyLoad技术? 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占了几百K的空间.Lazy Load 是一个用 JavaScript 编写的 ...

  3. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

  4. 使用jquery插件实现图片延迟加载技术（懒加载）

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  5. 前端优化之图片延迟加载（lazyload.js）

    要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量.本文中使用现成的lazyload.js插件,文末会放出下载地址. lazyload.js可以实现图片分批次加载,不是一次性加载完 ...

  6. 使用jquery插件实现图片延迟加载--懒加载技术

    原文链接:http://www.cnblogs.com/lei2007/archive/2013/05/31/3110725.html 感谢作者.以下为原文,备忘仅供自己学习. 第一:lazyLoad ...

  7. 转载：jquery插件实现图片延迟加载（lazyload.js）

    转载: http://www.cnblogs.com/tinyphp/archive/2013/04/09/3009385.html

  8. Uploadify & jQuery.imgAreaSelect 插件实现图片上传裁剪

    在网站中需要一个图片上传裁剪的功能,借鉴这篇文章 Ajax+PHP+jQuery图片截图上传 的指点,找到了jquery.imgAreaSelect这个不错插件,能对图片进行自定义区域选择并给出坐标, ...

  9. jQuery旋转插件jqueryrotate 图片旋转

    "jquery.rotate.min.js"是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .O ...

随机推荐

  1. jQuery toast 淡入淡出提示

    #toast{ position: fixed; top: 44%;left:50%;transform: translateX(-50%); min-width: 80px; max-width: ...

  2. CSP-S 2019 第二轮 退役记

    Day 0 复习数论,复习网络流,复习动态DP,复习ac自动机,复习后缀自动机- Day 1 进考场,得到解压密码,跟时事热点没有什么关系. 感觉键盘有点难受,右半部分包括退格.方向键.回车都比较黏. ...

  3. Swap Without Extra Variable

    Given two variables, x and y, swap two variables without using a third variable.   Example Given x = ...

  4. [NgRx] NgRx Runtime Checks

    Turn on runtime check: @NgModule({ declarations: [AppComponent], imports: [ ..., StoreModule.forRoot ...

  5. 四十七.iptables防火墙 filter表控制 扩展匹配 nat表典型应用

    1.iptables基本管理 关闭firewalld,开启iptables服务 查看防火墙规则 追加.插入防火墙规则 删除.清空防火墙规则   1.1 关闭firewalld,启动iptables服务 ...

  6. jQuery相关方法4-----元素创建和移除

    一.创建添加元素 父元素.append(子元素)-----被动追加创建 子元素.appendTo(父元素)-----主动追加创建 <script src="http://libs.ba ...

  7. 解决chrome浏览器自动填充密码

    chrome会自动填充密码,解决方法很简单 使用下面的参考代码即可: <input type="password" readonly οnfοcus="this.r ...

  8. 爬虫（八）：分析Ajax请求抓取今日头条街拍美图

    (1):分析网页 分析ajax的请求网址,和需要的参数.通过不断向下拉动滚动条,发现请求的参数中offset一直在变化,所以每次请求通过offset来控制新的ajax请求. (2)上代码 a.通过aj ...

  9. Java常用类、集合框架类1

    A   时间日期格式转换(SDUT 2246)(SimpleDateFormat用法) 转换的df2里面时间是US,上面的df1可以是CHINA或者US. package test; import j ...

  10. 函数第一部分：经典的永远是简单的-Python基础前传（10）

    (一)前言 对于零基础学习Python的朋友,或者转行做数据分析的朋友,跟jacky交流最多的问题就是Python网络爬虫学习问题,比如说要爬取美团,或者说爬取携程等等,在爬取的过程中,这些朋友总是会 ...