Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担。

    一、下载和引用

      官网下载地址:http://plugins.jquery.com/lazyload/

      Lazy Load 依赖于 jQuery. 所以需要引用2个js

      

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>

    二、简单调用

      要使用懒加载,需要改变img的src标签

html代码

<img alt="" width="640" height="480" data-original="img/example.jpg" />

js代码

$(function() {
$("img").lazyload();
});

  这样设置就会将所有的img的并且拥有data-original标签的图片更改为懒加载。

  备注:这里必须设置图片的widthheight,否则插件可能无法正常工作。

  上面是最简单的调用,但是一般而言,我们还有一些特殊的需求,比如想要提前一点点加载,避免网络过慢时加载缓慢,加载隐藏图片等等,lazyload都为我们提供相应的参数。

  1.设置临界点

    默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置threshold 选项, 如:设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.
    

$("img").lazyload({
threshold : 200
});

  2.使用特效

    默认情况下,图像完全加载并调用show()。你可以使用任何你想要的效果。下面的代码使用fadeIn (淡入效果)

$("img").lazyload({
effect : "fadeIn"
});

  3.当图片不连续时

  滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.

$("img").lazyload({
failure_limit : 20
});

  将 failurelimit 设为 20 ,当插件找到 20 个不在可见区域的图片时停止搜索.

  4.加载隐藏图片

  当界面有很多隐藏图片的时候并希望加载他们的时候则使用kip_invisible 属性,将其设置为false

$("img").lazyload({
skip_invisible : false
});

  到这里,上面的方法已经基本满足常规的懒加载使用了,还有特殊的使用,可查看官网API。

jQuery懒加载插件 – jquery.lazyload.js的更多相关文章

  1. jQuery懒加载插件jquery.lazyload.js使用说明实例

    jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...

  2. jQuery懒加载插件 – jquery.lazyload.js简单调用

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  3. jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

    jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...

  4. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  5. 懒加载插件- jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  6. jQuery懒加载插件

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  7. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

    引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.lazyload.j ...

  8. Vue图片懒加载插件 - vue lazyload的简单使用

    Vue module for lazyloading images in your applications. Some of goals of this project worth noting i ...

  9. jquery懒加载插件 jquery_lazyload 下载

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code https://pan.baidu.com/s/1UbOeyL_AaSNN_KMA4M ...

随机推荐

  1. Qt5.3.1,的linux平台体验之旅

    1. samba安装:http://blog.csdn.net/voice_shen/article/details/7692605 2. 安装run,  sudo chmod 777 filenam ...

  2. javascrip总结43:标签上自定义属性的操作

    1 获取标签属性 语法: element.getAttribute('属性名') 返回对应属性的值 ,如果没有返回null. //html <div id="box" ind ...

  3. UVa 11090 Going in Cycle!! (Bellman_Ford)

    题意:给定一个加权有向图,求平均权值最小的回路. 析:先十分答案,假设答案是 ans,那么有这么一个回路,w1+w2+w3+...+wk < k*ans,这样就是答案太大,然后移项可得,(w1- ...

  4. spark介绍4(sparksql)ODBC(Windows)gc

    (ODBC是open database connection开源数据连接)  在Windows控制面板的管理工具里面 GC(Garbage Collection):JAVA/.NET中的垃圾回收器 l ...

  5. kafka学习默认端口号9092

    一 Kafka 概述1.1 Kafka 是什么在流式计算中,Kafka 一般用来缓存数据,Storm 通过消费 Kafka 的数据进行计算.1)Apache Kafka 是一个开源消息系统(微信公众号 ...

  6. 【微服务架构】SpringCloud之Ribbon(四)

    一:Ribbon是什么? Ribbon是Netflix发布的开源项目,主要功能是提供客户端的软件负载均衡算法,将Netflix的中间层服务连接在一起.Ribbon客户端组件提供一系列完善的配置项如连接 ...

  7. ThinkJS 中的Logic层

    第一个为什么需要Logic层: 当在 Action 里处理用户的请求时,经常要先获取用户提交过来的数据,然后对其校验,如果校验没问题后才能进行后续的操作:当参数校验完成后,有时候还要进行权限判断等,这 ...

  8. unigui的UnimDatePicker控件使用经验

    最近使用unigui的UnimDatePicker控件遇到只能选择当年之前的年份和日期及日期选择界面不能显示中文的问题,经以下设置就能正常使用.1.UnimDatePicker月份显示中文  unim ...

  9. js防windos锁屏功能实现

    <li class="layui-nav-item"> <a href="javascript:;" id="lock"& ...

  10. hadoop2.2.0编译、安装和测试

    搭建环境:单机64位CentOS6.5 .jdk1.6.0_45.Hadoop2.2.0 1.准备编译环境 从http://www.apache.org/dyn/closer.cgi/hadoop/c ...