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 ...
随机推荐
- 关于autofac的一些具体的用法
简介:Autofac是一个.net下非常优秀,性能非常好的IOC容器(.net下效率最高的容器) 1.nuget 引用 2.创建两个类库项目,IService (用于编写接口),ServiceImpl ...
- python for循环的遍历
a = "你好啊"for i in range(len(a)): print(i) 解释:"len()" 意思是长度,a中有三个字,所以len(a) = 3,把 ...
- 干货 | LIDAR、ToF相机、双目相机如何科学选择?
点击"计算机视觉life"关注,置顶更快接收消息! 本文阅读时间约5分钟 本文翻译自卡内基梅隆大学 Chris asteroid 三维视觉技术的选择 传感器参数及定义 LIDAR ...
- 关于12c安装后打补丁
根据ID:1454618.1,可在MOS上查到相关版本详细的补丁版本号. 补丁安装过程参考补丁文档,以下是大致过程. 1. 更新OPatch2. 创建OCM应答文件(每个节点)$ORACLE_HOME ...
- 将文件转成clob添加到Oracle数据库中
Controller层: @Controller@RequestMapping(value = {"/Test/TestController"})public class Test ...
- C# Json处理相关
最近工作中遇到的Json问题确实很头大,主要是各种转义符的处理,想了一种通用的方式,来处理任意转移方式的Json字符串: /// <summary> /// 去除返回值中的转义符,返回js ...
- 用Volume在主机和Docker容器文件传输
1.使用Volume在主机和容器之间传输文件. 在官方文档中可以看到使用如下命令即可创建一个volume: Create a volume: $ docker volume create my-vol ...
- dede织梦手机站m文件夹功能基础详解
织梦2015年6月8日更新后,就添加了很多针对手机移动端的设计,最大的设计就是添加了生成二维码的织梦标签和织梦手机模板功能,织梦更新后,默认的 default模板中就包含手机模板,所以我们可以给织梦网 ...
- CentOS 7 安装Redis4.0
redis是一种内存型的NoSQL数据库,优点是快,常用来做缓存用 redis存储数据的方法是以key-value的形式 value类型支持字符串,列表,哈希等多种类型 环境 : CnetOS7 ...
- koa2:通过Ajax方式上传文件,使用FormData进行Ajax请求
koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...