jQuery lazyload 懒加载
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.
Demo页面:
基本选项
淡入效果
对不支持JavaScript浏览器的降级处理
水平滚动
容器内水平滚动
容器内垂直滚动
页面内存在N多图片
经过五秒钟的延迟后加载图片
用AJAX来加载图片
如何使用
Lazy Load 依赖于 jQuery. 请将下列代码加入HTML的结尾,也就是</body>
前:
1
2
|
< script type = "text/javascript" src = "jquery.js" ></ script >
< script type = "text/javascript" src = "jquery.lazyload.js" ></ script >
|
你必须改变图片的标签。图像的地址必须放在data-original
属性上。给懒加载图像一个特定的class(例如:lazy)。这样你可以很容易地进行图像插件捆绑。代码如下:
1
|
< img class = "lazy" alt = "" width = "640" height = "480" data-original = "img/example.jpg" />
|
1
2
3
|
$( function () {
$( "img.lazy" ).lazyload();
});
|
这将使所有 class 为 lazy
的图片将被延迟加载.
Demo:基本选项
TIPS:这里必须设置图片的width
和height
,否则插件可能无法正常工作。
设置临界点
默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置threshold
选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.
1
2
3
|
$( "img.lazy" ).lazyload({
threshold : 200
});
|
设置事件来触发加载
你可以使用jQuery事件,例如click
和mouseover
。也可以使用自定义事件,如sporty
、foobar
默认情况下是要等到用户向下滚动并且图像出现在视口中时。只有当用户点击它们才加载图片:
1
2
3
|
$( "img.lazy" ).lazyload({
event : "click"
});
|
Demo:经过五秒钟的延迟后加载图片
使用特效
默认情况下,插件等待图像完全加载并调用show()
。你可以使用任何你想要的效果。下面的代码使用fadeIn
(淡入效果)。
Demo:淡入效果
1
2
3
|
$( "img.lazy" ).lazyload({
effect : "fadeIn"
});
|
针对不启用JavaScript的情况
几乎所有浏览器的 JavaScript 都是激活的. 然而可能你仍希望能在不支持 JavaScript 的客户端展示真实图片. 当浏览器不支持 JavaScript 时优雅降级, 你可以将真实的图片片段在写 <noscript>
标签内.
1
2
|
< img class = "lazy" data-original = "img/example.jpg" width = "640" heigh = "480" >
< noscript >< img src = "img/example.jpg" width = "640" heigh = "480" ></ noscript >
|
可以通过 CSS 隐藏占位符.
1
2
3
|
.lazy {
display : none ;
}
|
在支持 JavaScript 的浏览器中, 你必须在 DOM ready 时将占位符显示出来, 这可以在插件初始化的同时完成.
1
|
$( "img.lazy" ).show().lazyload();
|
图片在容器里面
你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.
Demo:容器内水平滚动, 容器内垂直滚动
当图像不连续时
滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit
选项来控制加载行为.
1
2
3
|
$( "img.lazy" ).lazyload({
failure_limit : 10
});
|
将 failurelimit 设为 10 ,令插件找到 10 个不在可见区域的图片时才停止搜索. 如果你有一个猥琐的布局, 请把这个参数设高一点.
加载隐藏的图片
可能在你的页面上埋藏可很多隐藏的图片. 比如插件用在对列表的筛选, 你可以不断地修改列表中各条目的显示状态. 为了提升性能, Lazy Load 默认忽略了隐藏图片. 如果你想要加载隐藏图片, 请将 skip_invisible
设为 false
1
2
3
|
$( "img.lazy" ).lazyload({
skip_invisible : false
});
|
jQuery lazyload 懒加载相关推荐
- jQuery.lazyload懒加载
注意事项:jquery.js务必先引进,然后才加载lazyload:img长宽一定要有,每幅长宽可以不一致:在js段,可以不用$(window).ready来加载事件: 1.将图片路径写入data-o ...
- 在ThinkPHP框架(5.0.24)下引入Ueditor并实现向七牛云对象存储上传图片同时将图片信息保存到MySQL数据库,同时实现lazyload懒加载...
这是我花了很多天的时间才得以真正实现的一组需求. 文章后面有完整Demo的GitHub链接. 一. 需求描述 1. 应用是基于ThinkPHP5开发的: 2. 服务器环境是LNMP,PHP版本是7.2 ...
- Jquery图片懒加载和预加载
Jquery图片懒加载和预加载 懒加载 1.什么是懒加载 Lazy Load也叫懒加载,延迟加载,顾名思义,就是在图片未到达可视区域时,不加载图片,我们常常在很多的优秀网站上看到类似的例子,例如迅雷. ...
- php ajax 懒加载demo,lazyload懒加载,怎么支持ajax获得的新内容?
lazyload懒加载,怎么支持ajax获得的新内容? 现在问题是: 1.老的内容已经$("img.lazy").lazyload({effect: "fadeIn&qu ...
- jquery的懒加载记录一下踩得坑
官网下载地址:http://plugins.jquery.com/lazyload/ 要引入两个文件,注意这些事html中包含着 <script src="https://code.j ...
- jQuery图片懒加载示例(滚动函数再加载)
图片懒加载可以极大的减轻服务器请求的负担,如果没有做这样的操作,一个页面很多图片同时请求,就会渲染慢,影响用户体验! 原理其实很简单,就是滚动条拉下来显示的时候再加载显示出真实的图片,在不显示的区域的 ...
- jQuery 插件—— 懒加载
何为懒加载? 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资 ...
- Concis组件库封装——LazyLoad懒加载
懒加载组件,支持任意元素进行延迟加载,可以在SPA单页应用首页渲染时减少非可视区的DOM渲染,加快首屏渲染效率,大致用法: <LazyLoad><div><span> ...
- jQuery 图片懒加载的方法 以及用$('.lazyImg').each()出错的地方,记录一下~
我高小莫,今天在这里发誓,如果以后能不用jQuery 的我绝不再用,做习惯了前后端分离的项目,再次回到jQuery ,发现异常的恶心~~~~· 不怪谁,怪就怪当初我,选择项目架构的时候为了省力,竟然选 ...
最新文章
- js 对动态添加的table 排序
- python爬虫教程网-Python爬虫全集
- 国家电网公司“SG186”工程总部企业门户开发实施
- 实时个性化推荐系统简述
- 如何让报表告别繁琐?简单操作实现报表联动!
- codeforces contest 1142
- (转)千万别熬夜:身体器官晚上工作时间表一览
- 对于Ping的过程,你真的了解吗?
- centos6安装mysql权限被拒绝_CentOS6.6安装mysql出现的问题
- 本地项目怎么推送到码云_如何将本地项目放到码云(gitee)上
- SpringCloud Hystrix微服务架构的高并发问题与解决策略
- java-----任意进制间的转换
- Android 标题栏(2)
- python环境配置(一)——Linux下将python2.6升级到2.7 安装pip 以及升级中遇到问题的解决方法
- 一个月薪两万的Web安全工程师要掌握哪些技能?
- C语言实验报告(通用)
- 大型网站技术架构-《大型网站技术架构:核心原理与案例分析》读书笔记
- microbit python下mp3_语音 — BBC micro:bit MicroPython中文版 0.0.1 文档
- 《众妙之门——网页排版设计制胜秘诀》——导读
- Arduino和SX1278的那些事