jQuery Lazy Load 图片延迟加载
基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载。
对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度。
- 版本:
- jQuery v1.4.4+
- jQuery Lazy Load v1.7.2
- 注意事项:
- 需要真正实现图片延迟加载,必须将真实图片地址写在 data-original 属性中。若 src 与 data-original 相同,则只是一个特效而已,并不达到延迟加载的功能。
-
载入 JavaScript 文件
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>修改 HTML 代码中需要延迟加载的 IMG 标签
<!--
将真实图片地址写在 data-original 属性中,而 src 属性中的图片换成占位符的图片(例如 1x1 像素的灰色图片或者 loading 的 gif 图片)
添加 class="lazy" 用于区别哪些图片需要延时加载,当然你也可以换成别的关键词,修改的同时记得修改调用时的 jQuery 选择器
添加 width 和 height 属性有助于在图片未加载时占满所需要的空间
-->
<img class="lazy" src="grey.gif" data-original="example.jpg" width="640" heigh="480">调用 Lazy Load
$('img.lazy').lazyload();
jQuery Lazy Load 图片延迟加载的更多相关文章
- Lazy Load 图片延迟加载(转)
jQuery Lazy Load 图片延迟加载来源 基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. ...
- jQuery Lazy Load图片懒加载
传送门:官网地址,jQuery Lazy Load v1.7.2下载,Github 使用方法: 1.引用js文件 <script src="jquery.js">< ...
- lazy load 图片延迟加载 跟随滚动条
http://plugins.jquery.com/lazyload/ Jquery.LazyLoad.js插件参数详解: 1,用图片提前占位 placeholder : "img/grey ...
- 使用jquery插件实现图片延迟加载技术(懒加载)
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
- JQuery LazyLoad实现图片延迟加载-探究
对于大量图片的网站,图片延迟加载是提高速度和性能的好方法. 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片).大体常用的 ...
- jquery.lazyload.js 图片延迟加载
当做网页的时候,特别是整个网页展示图片较多的时候,用到图片延迟效果是很好的 使用方法也非常简单. 1.在网页任何位置(一般是在</body>前面)加上如下代码(注意<script&g ...
- jquery.lazyload 实现图片延迟加载jquery插件
看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图 ...
- jquery.lazyload.js图片延迟加载
转:http://www.jb51.net/article/50273.htm 这篇文章主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下 ...
- jquery.lazyload.js图片延迟加载(懒加载)--转载
一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...
随机推荐
- Swift— Swift编码规范之命名规范-备
程序代码中到处都是自己定义的名字,取一个有样并且符合规范的名字非常重要. 命名方法很多,但是比较有名的,广泛接受命名法有: 匈牙利命名,一般只是命名变量,原则是:变量名=类型前缀+描述,如bFoo表示 ...
- 01 - 概述 VTK 6.0 迁移
摘要 对vtk版本4和5的管道机制重新架架构的主要目的是:迁移数据对象和算法对象中的管道执行逻辑到一个新集合的类中,我们称这个集合类叫executives.分离数据和执行模型的代码后,可以双双简化修改 ...
- 2015年6月股灾永远载入A股史册
之前很奇怪这次牛市行情的暴涨与暴跌,后来发现成交量是以往不可想象的,而这一切的源头就是融资融券,也就是杠杆. 杠杆的作用是无穷的,就像阿基米德说的那样“给我一个支点,我就能撬起地球”. 杠杆是个放大器 ...
- 电脑远程控制手机2—webkey
远程控制神器,这个是真真切切试验成功了.我用的手机是OPPOR817和华为A199. 网上去下载webkey,http://soft.shouji.com.cn/down/23169.html 然后安 ...
- 涂抹Oracle—Flashback
11.1 基于flashback查询过去的数据 a.基于时间的查询(as of timestamp) 构造表falsh_tbl,删除数据然后查询 SQL>select * from flash ...
- android百度定位
package com.aihunqin.test; import android.app.Activity; import android.os.Bundle; import android.wid ...
- hdu 4535 吉哥系列故事——礼尚往来
http://acm.hdu.edu.cn/showproblem.php?pid=4535 错排公式:a[i]=(i-1)*(a[i-2]+a[i-1]): #include <cstdio& ...
- BZOJ3412: [Usaco2009 Dec]Music Notes乐谱
3412: [Usaco2009 Dec]Music Notes乐谱 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 35 Solved: 30[Sub ...
- window.open的小技巧分享
今天再次谈起window.open是因为发现了一个比较好玩的小技巧,详细内容我们稍后详细说明. 聊到window.open,不得不说明一下他的使用方法,主要有两种形式: win ...
- eclipse与myeclipse工程互转
eclipse转myeclipse: 在Myeclipse中新建web工程导入即可. myeclipse转eclipse: 在eclipse中新建web工程,把myeclipse项目中代码手动拷贝到 ...