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 ...
随机推荐
- 11、jeecg 笔记之 界面常用整理 - 方便复制粘贴
1.datagrid 操作按钮(按钮样式) 操作按钮的显示主要依赖于 <t:dgCol title="操作" field="opt" ></ ...
- pyothon学习笔记2-元组
# 1.元组对象不可修改,元组中列表对象的对象可以修改 t = (1,2,[1,2,3]) t[2] = [1,2,3,4] # 'tuple' object does not support ite ...
- 初尝Spring Cloud Config
1,下载源码 地址https://spring.io/guides/gs/centralized-configuration/ 2,导入工程 解压后分别把Server端与Client端导入到两个Ecl ...
- charles-Andriod 手机手机抓包乱码
然后重启进行进行抓包
- _sntprintf_s 和 _sntprintf 区别
https://docs.microsoft.com/en-us/cpp/c-runtime-library/reference/snprintf-s-snprintf-s-l-snwprintf-s ...
- 关于.net后台的异步刷新的问题
我在.net后台做了一个功能.这里我简单话的描述这个功能. 一个下拉框,然后选择其中的不同的下拉信息,下面会有不同的材料表的显示. 其中一个表中如果有必填的字段,那么你切换这个的时候,会导致下拉框不会 ...
- 解决IE浏览器把application/json响应视为文件并尝试下载
下面我的解决方案是针对.net MVC的,其他的解决方案也类似,就是把响应的mimeType换成IE浏览器已经拥有的.如application/json换成text/plain #region 退出登 ...
- php curl 上传json数据
PUT $data = array('username'=>'dog','password'=>'tall'); $data_json = json_encode($data); $ch ...
- java.lang.IllegalAccessError: org.apache.commons.dbcp.DelegatingPreparedStatement.isClosed()Z
做spring和mybaits整合时出现的错误,让这个问题困扰了一早上,通过查资料终于把这个问题解决了 具体问题描述: java.lang.IllegalAccessError: org.apache ...
- Spring Boot:快速入门
上一篇讲述什么是Spring Boot,这一篇讲解怎么使用IDE工具快速搭建起来独立项目. 一.构建方式 快速搭建项目有三种方式,官方也有答案给到我们: 二.构建前准备 想要使用IDE运行起来自己的S ...