jquery延迟加载(懒加载)插件
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.
如何使用
Lazy Load 依赖于 jQuery. 请将下列代码加入HTML的结尾,也就是</body>
前:
<
script
type
=
"text/javascript"
src
=
"jquery.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"jquery.lazyload.js"
></
script
>
data-original
属性上。给懒加载图像一个特定的class(例如:lazy)。这样你可以很容易地进行图像插件捆绑。代码如下:<
img
class
=
"lazy"
alt
=
""
width
=
"640"
height
=
"480"
data-original
=
"img/example.jpg"
/>
$(
function
() {
$(
"img.lazy"
).lazyload();
});
lazy
的图片将被延迟加载.设置临界点
默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置threshold
选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.
$(
"img.lazy"
).lazyload({
threshold : 200
});
设置事件来触发加载
你可以使用jQuery事件,例如click
和mouseover
。也可以使用自定义事件,如sporty
、foobar
默认情况下是要等到用户向下滚动并且图像出现在视口中时。只有当用户点击它们才加载图片:
$(
"img.lazy"
).lazyload({
event :
"click"
});
使用特效
默认情况下,插件等待图像完全加载并调用show()
。你可以使用任何你想要的效果。下面的代码使用fadeIn
(淡入效果)
$(
"img.lazy"
).lazyload({
effect :
"fadeIn"
});
针对不启用JavaScript的情况
几乎所有浏览器的 JavaScript 都是激活的. 然而可能你仍希望能在不支持 JavaScript 的客户端展示真实图片. 当浏览器不支持 JavaScript 时优雅降级, 你可以将真实的图片片段在写 <noscript>
标签内.
<
img
class
=
"lazy"
data-original
=
"img/example.jpg"
width
=
"640"
heigh
=
"480"
>
<
noscript
><
img
src
=
"img/example.jpg"
width
=
"640"
heigh
=
"480"
></
noscript
>
.lazy {
display
:
none
;
}
$(
"img.lazy"
).show().lazyload();
当图像不连续时
滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit
选项来控制加载行为.
$(
"img.lazy"
).lazyload({
failure_limit : 10
});
加载隐藏的图片
可能在你的页面上埋藏可很多隐藏的图片. 比如插件用在对列表的筛选, 你可以不断地修改列表中各条目的显示状态. 为了提升性能, Lazy Load 默认忽略了隐藏图片. 如果你想要加载隐藏图片, 请将 skip_invisible
设为 false
$(
"img.lazy"
).lazyload({
skip_invisible :
false
});
希望可以帮到你!
jquery延迟加载(懒加载)插件的更多相关文章
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.lazyload.j ...
- jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
- jQuery懒加载插件jquery.lazyload.js使用说明实例
jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...
- 图片懒加载插件lazyload使用方法
图片懒加载插件lazyload使用方法 一.如何使用: Lazy Load 依赖于 jQuery.引入文件 <script type="text/javascript" sr ...
- Vue图片懒加载插件
图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...
- Android中ViewPager+Fragment取消(禁止)预加载延迟加载(懒加载)问题解决方案
转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/53205878本文出自[DylanAndroid的博客] Android中Vie ...
- vue-lazyload懒加载插件的使用
vue-lazyload懒加载插件的使用其实很简单,不想vue-loader官网用法写的那么简单.下面代码演示: 1.安装插件 npm install vue-lazyload --save 2. ...
- jquery图片懒加载效果
1.要引入jquery 2.要引入underscore.js <!DOCTYPE html> <html lang="en"> <head> & ...
- jquery 图片懒加载
jquery 图片懒加载 CreationTime--2018年7月1日14点45分 Author:Marydon 1.源码展示 (function(a){a.fn.lazyload=functi ...
随机推荐
- MySQL 允许局域网内其他网段主机访问本地MySql数据库
Mac下和Windows下均适合
- webstorm 2018 Eslint修复 快捷键设置
首先确保eslint插件已安装 已勾选
- 我的FPGA之旅4---led流水灯
[1]输入端口不能使用reg数据类型,因为reg类型对应的FPGA内部的寄存器.这样理解:reg寄存器具有记忆功能;而wire类型数据就相当于一根连线.input输入信号用wire连线进来就好:out ...
- Django 分组 聚合
base_sql = Order.objects.filter(is_paid=True, merchant=merchant_id) # 如果aggregate前没有values,得到的结果是一个字 ...
- Repeater 实现 OnSelectedIndexChanged
在Repeater中使用DropDownList的方法 在Repeater中使用DropDownList的方法 以下代码并不完整,只记录了关键的方法 aspx代码中 假设这是一个用户管理的系统的模 ...
- python中利用matplotlib绘图可视化知识归纳
python中利用matplotlib绘图可视化知识归纳: (1)matplotlib图标正常显示中文 import matplotlib.pyplot as plt plt.rcParams['fo ...
- #WEB安全基础 : HTTP协议 | 0x16 HTTPS:加密的秘密
公开秘钥加密&&共享秘钥加密 这两个冗长的短语,让我拿什么理解? 我们知道HTTPS有加密功能,以上的两个短语很常用.先摆在这,接下来开始尝试理解它们. 共享秘钥加密(对称秘钥加密): ...
- CentOS 6.9 升级OpenSSH版本 关闭ssh服务后门
最近用低版本的OpenSSH(5.9p1版本) 的漏洞给系统留了个后门 , 可以劫持root密码或者给root开启后门密码 : 利用Openssh后门 劫持root密码 如果公司还在用CentOS6的 ...
- keil在线烧录突然提示 No target connected #
keil在线烧录突然提示 No target connected 运行环境 IDE:keil uvsion5 微处理器:STM32F0xx 系列 烧录器:ST-LINK/V2 问题描述 烧录新程序并进 ...
- IO流(三)
五.Java序列化 概述 Java序列化是指把Java对象转换为字节序列的过程 Java反序列化是指把字节序列恢复为Java对象的过程 当两个Java进程进行通信时,发送方需要把这个Java对象转换为 ...