jQuery懒加载插件 – jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担。
一、下载和引用
官网下载地址:http://plugins.jquery.com/lazyload/
Lazy Load 依赖于 jQuery. 所以需要引用2个js
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
二、简单调用
要使用懒加载,需要改变img的src标签
html代码
<img alt="" width="640" height="480" data-original="img/example.jpg" />
js代码
$(function() {
$("img").lazyload();
});
这样设置就会将所有的img的并且拥有data-original标签的图片更改为懒加载。
备注:这里必须设置图片的width
和height
,否则插件可能无法正常工作。
上面是最简单的调用,但是一般而言,我们还有一些特殊的需求,比如想要提前一点点加载,避免网络过慢时加载缓慢,加载隐藏图片等等,lazyload都为我们提供相应的参数。
1.设置临界点
默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置threshold
选项, 如:设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.
$("img").lazyload({
threshold : 200
});
2.使用特效
默认情况下,图像完全加载并调用show()
。你可以使用任何你想要的效果。下面的代码使用fadeIn
(淡入效果)
$("img").lazyload({
effect : "fadeIn"
});
3.当图片不连续时
滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit
选项来控制加载行为.
$("img").lazyload({
failure_limit : 20
});
将 failurelimit 设为 20 ,当插件找到 20 个不在可见区域的图片时停止搜索.
4.加载隐藏图片
当界面有很多隐藏图片的时候并希望加载他们的时候则使用kip_invisible
属性,将其设置为false
$("img").lazyload({
skip_invisible : false
});
到这里,上面的方法已经基本满足常规的懒加载使用了,还有特殊的使用,可查看官网API。
jQuery懒加载插件 – jquery.lazyload.js的更多相关文章
- jQuery懒加载插件jquery.lazyload.js使用说明实例
jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...
- jQuery懒加载插件 – jquery.lazyload.js简单调用
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 懒加载插件- jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery懒加载插件
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.lazyload.j ...
- Vue图片懒加载插件 - vue lazyload的简单使用
Vue module for lazyloading images in your applications. Some of goals of this project worth noting i ...
- jquery懒加载插件 jquery_lazyload 下载
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code https://pan.baidu.com/s/1UbOeyL_AaSNN_KMA4M ...
随机推荐
- 配置hive环境以及mysql配置后必须做
1.先在主节点上安装阿里云配置(看别的文档) 2.把需要的两个jar包加入进来(放到hadoop用户目录下面即可即/home/hadoop/) mysql-connector-java-5.1.47. ...
- javascript高级程序设计读书笔记----严格模式
ECMAScript5最早引入“严格模式". 使用 "use strict"开启严格模式 function test(){ "use strict"; ...
- XE7 & FMX 那些年我们一起上过的控件:StringGrid 之(1) 自定义标题样式
FMX下的Grid类控件似乎不太尽如人意,可能是和官方的资料没有跟得上它的发行版本有关系. 以下讨论StringGrid的列表头及对齐方式. 先上个效果图: FMX的列表头估计很多人都是用盒子上流传甚 ...
- DateTime.Now.ToString("yyyy/MM/dd") 时间格式化中的MM为什么是大写的?
如果MM是小写,就表示时间里的分钟yyyy-MM-dd HH:mm:ss (年-月-日 时:分:秒) yyyy-MM-dd HH:mm:ss 年-月-日 时:分:秒大写是为了区分“月”与“分” 顺便说 ...
- [转载].NET Web开发技术(补充)
大家在工作应该养成善于总结的习惯,总结你所学习.使用的技术,总结你所工作事项的比较好的地方,善于总结不断的沉淀优化自己.适时停下来总结下过去走过的路,才能让我们的未来走的更坚定.文章转自JamesLi ...
- Backup--清理MSDB中的备份记录
每次数据库备份或日志备份,都会向msdb中多多张表插入数据,如果备份比较频繁的话,需要定期清理. 使用sp_delete_backuphistory来清理以下表中数据: backupfile back ...
- ajax使用json数据格式--无效的 JSON 基元
ajax使用json数据格式提交 一开始这么写的 var flobj = { UserId: userid, ForbidSDT: ForbidSDT, ForbidEDT: ForbidEDT } ...
- solidity 合约间调用以及参数传递
在 以太坊中合约间是可以相互调用,并且正常进行参数传递以及返回值处理. contract1.sol pragma solidity ^0.4.0; contract Test1 { uint256 p ...
- 8 个用于生产环境的 SQL 查询优化调整
在没有数据仓库或单独的分析数据库的组织中,报告的唯一来源和最新的数据可能是在现场生产数据库中. 在查询生产数据库时,优化是关键.一个低效的查询可能会对生产数据库产生大量的资源消耗,如果查询有错误会引发 ...
- loadrunner 11问题汇总
1.问题描述:安装loadrunner11后,录制脚本时,explore未打开,event为0,录制结果为空.安装环境是window7+ie8+loadrunner11 解决方案: 1.首先要把ie设 ...