jquery lazy load
LazyLoad是一个Js编写的Jq插件,它可以延迟加载页面中的图片,在浏览器可视范围中的图片会被加载。
如何使用:LazyLoad依赖于Jquery,在html的结尾处 ,就是在</body>前。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
你必须改变图片的标签,图片的地址必须放到data-original属性上。给懒加载图片一个指定的class(例如:lazy)代码如下:
html:<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
js:$(function() {
$("img.lazy").lazyload();
})
这会将所有图进行延迟加载
设置临界点
默认情况下只有图片出现在屏幕时才会加载,如果你想提前加载图片,那么可以设置threshold,这个属性的单位是px,不过赋值的时候不用带px ,呵呵。
设置事件来触发加载
$("img.lazy").lazyload({
event : "click"
});
使用特效
$("img.lazy").lazyload({
effect : "fadeIn"
});
jquery lazy load的更多相关文章
- jQuery Lazy Load 图片延迟加载
基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. 版本: jQuery v1.4.4+ jQuery ...
- jQuery Lazy Load图片懒加载
传送门:官网地址,jQuery Lazy Load v1.7.2下载,Github 使用方法: 1.引用js文件 <script src="jquery.js">< ...
- Lazy Load 图片延迟加载(转)
jQuery Lazy Load 图片延迟加载来源 基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. ...
- Lazy Load, 延迟加载图片的 jQuery 插件.
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery延迟加载插件(Lazy Load)详解
最 新版本的Lazy Load并不能替代你的网页.即便你使用JavaScript移除了图片的src属性,有些现代的浏览器仍然会加载图片.现在你必须修改你的html代 码,使用占位图片作为img标签的s ...
- 延迟加载图片的 jQuery 插件:Lazy Load
网站的速度非常重要,现在有很多网站优化的工具,如 Google 的Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it这个工具对图片进行批量压缩,但是对 ...
- Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- jQuery Wookmark Load 瀑布流布局实例演示
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
- jquery的load和get的区别
jquery的load把返回的数据放到指定的元素中,不是全局函数:jquery的get把返回的数据交给用户处理,是全局函数. load和get同样是jquery的ajax函数,load的实现,几乎等于 ...
随机推荐
- docker-compose模板文件
mysql.redis.asp.net core项目应用程序三个常见的docker-compose文件模板参考: version: "3" services: mysql: res ...
- 短网址API
http://tao.tf/open/ API简介 API允许第三方自由调用URL缩短,基于text/json/jsonp/js模式,支持post.get提交. 支持缩短网址: 淘宝网(*.taoba ...
- <转载>Vim的寄存器(复制黏贴要用)
https://blog.csdn.net/hk2291976/article/details/42196559 消除高亮 :noh
- Oracle导入大数据量(百万以上)dmp文件,报错ora-12592 :包错误
进行自动化测试过程中,发现需要重新搭建一套自动化测试库,然后利用pl/sql对数据库导出: 进行导入后发现报错ora-12592 :包错误 原因分析,数据量过大,传输超时,需要在Oracle服务端以及 ...
- C# 中传参中的OUT 和 ref 区别 笔记
//out传参前需要对参数进行赋值处理,ref则不需要.//out.ref 传参都可以对值进行改变 1 static void Main(string[] args) { ; //int J = 10 ...
- 原生JS面试题
面试中遇到的原生js题总结 1.js 去重1) indexOf Array.prototype.unique = function(){ var result = []; var len = th ...
- toLatin1 qt
Latin1是ISO-8859-1的别名,有些环境下写作Latin-1.ISO-8859-1ISO-8859-1编码是单字节编码,向下兼容ASCII,其编码范围是0x00-0xFF,0x00-0x7F ...
- Anaconda虚拟环境
创建虚拟环境:conda create -n env_name packages 例:创建名为env1的虚拟环境,并在其中安装numpy,conda create -n env1 numpy. 指定特 ...
- Tomcat7在centos7.3上正常运行,在centos7.2就不行了
我在jdk1.7的环境下,把一个tomcat7从一台centos7.3的服务器迁移到7.2,理论上讲 迁移完成之后只要端口没有被占用,环境变量配置完成,Tomcat是可以正常启动的(空的Tomcat ...
- HBase rebalance 负载均衡源码角度解读使用姿势
关键词:hbase rebalance 负载均衡 参考源码版本:apache-hbase-1.1.2 什么是HBase Rebalance ? 随着数据写入越来越多以及不均衡,即使一开始每个Regio ...