图片延迟加载
来源:互联网 发布:编程语言排行榜2016 7 编辑:程序博客网 时间:2024/06/15 22:14
- 插件介绍
- 安装
- 源
- 使用
- 提前加载设置临界点
- 事件触发可以是jquery事件也可以是自定义事件Event
- 图片的延迟加载
- 设定效果Effects
- 应对不支持 JavaScript 的浏览器
- 滚动容器内的图片container
- 当图像不连续时
- 加载隐藏的图片
- 下载插件
- 演示
插件介绍
jquery.lazyload.js 用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的。
jquery.lazyload.js 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置.这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度.浏览器将会在 加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.
- 它可以提高页面加载速度;
- 在某些情况清晰它也可以帮助减少服务器负载。
安装
bower 安装:
$ bower install jquery.lazyload
npm 安装:
npm install jquery-lazyload
源
https://github.com/tuupola/jquery_lazyload
doc
使用
Lazy Load 依赖于 jQuery. 请将下列代码加入HTML的结尾,也就是 </body>
前:
<script src="jquery.js"></script><script src="jquery.lazyload.js"></script>
- 将图片路径写入data-original属性
- 给lazyload的图片增加一个名为lazy的class
- 选择所有要lazyload的图片(img.lazy),执行lazyload();
<img class="lazy" data-original="img/example.jpg" style="margin-top:1000px" height="200"><script> $(function(){ $("img.lazy").lazyload(); })</script>
注意:
1. 必须设置图片的高度或者宽度,否则插件可能无法正常工作。
2. img 的 src 属性我们可以将其用为占位符图片。
提前加载(设置临界点)
默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置threshold 选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.
$(function(){ $("img.lazy").lazyload({ threshold :200 });})
事件触发(可以是jquery事件,也可以是自定义事件)——Event
当触发定义的事件时,图片才开始加载
$(function(){ $("img.lazy").lazyload({ event : "click" });})
上面的例子点击图片后,才开始加载
图片的延迟加载
利用事件触发,我们可以设置一个延迟时间,再去触发然后加载图片
$(function() { $("img.lazy").lazyload({ event : "sporty" });});$(window).bind("load", function() { var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000);});
设定效果——Effects
插件默认的加载效果是 show() ,你可以使用任何你想要的效果。下面的代码使用了 fadeIn() 。
$("img.lazy").lazyload({ effect : "fadeIn"});
应对不支持 JavaScript 的浏览器
<img class="lazy" src="img/placehold.png" data-original="img/example.png" width="600" height="300"><noscript> <img src="img/example.png" width="600" height="300"></noscript>
那么,刚开始的时候,我们将需要延迟加载的图片区域隐藏起来。
.lazy { display: none;}
针对支持 JavaScript 的浏览器,我们在 document loads 的时候,将图片展示区域显示出来,然后调用 lazyload() 。
$('img.lazy').show().lazyload();
滚动容器内的图片——container
插件也可以使用在滚动容器内的图片上。下面的div拥有scrollerbar,内容的内容进行滚动,滚到图片位置时,图片开始加载
<div style="height:600px;overflow:scroll" id="container"> <img class="lazy" data-original="img/example.jpg" alt="" style="margin-top:1000px" height="200"></div><script> $(function(){ $("img.lazy").lazyload({ container: $("#container") }); })</script>
当图像不连续时
滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.
$("img.lazy").lazyload({ failure_limit : 10});
将 failurelimit 设为 10 ,令插件找到 10 个不在可见区域的图片时才停止搜索. 如果你有一个猥琐的布局, 请把这个参数设高一点.
加载隐藏的图片
可能在你的页面上埋藏可很多隐藏的图片. 比如插件用在对列表的筛选, 你可以不断地修改列表中各条目的显示状态. 为了提升性能, Lazy Load 默认忽略了隐藏图片. 如果你想要加载隐藏图片, 请将 skip_invisible 设为 false 。
$("img.lazy").lazyload({ skip_invisible : false});
下载插件
https://github.com/tuupola/jquery_lazyload
演示
jquery.lazyload.js 演示 demo
- 图片延迟加载技术
- jquery延迟加载图片
- jquery 图片延迟加载
- 图片延迟加载
- 图片延迟加载
- 延迟加载图片
- js图片延迟加载
- 图片延迟加载 jquery
- 图片延迟加载
- Jquery图片延迟加载
- TinyMce图片延迟加载
- 图片的延迟加载
- jquery 图片延迟加载
- 图片的延迟加载
- lazyload图片延迟加载
- 网页图片延迟加载
- Jquery延迟加载图片
- javascript图片延迟加载
- Queue的几种容器
- 矩阵快速幂-中国(北方)大学生程序设计训练赛(第一周)Water Problem
- Elasticsearch删除一个type下的所有数据
- iOS判断字符串为空
- 安装PHP扩展yar
- 图片延迟加载
- oracle子查询和集合查询
- 文本分类的研究与实现
- Bootstrap文件上传组件:bootstrap fileinput
- 逆波兰表达式
- 福尔摩斯的约会
- maven修改远程和本地仓库地址
- python kill process by name
- 重走JAVA编程路,还是熟悉的路-html标签和css属性