基于 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 图片延迟加载的更多相关文章

  1. Lazy Load 图片延迟加载(转)

    jQuery Lazy Load 图片延迟加载来源 基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. ...

  2. jQuery Lazy Load图片懒加载

    传送门:官网地址,jQuery Lazy Load v1.7.2下载,Github 使用方法: 1.引用js文件 <script src="jquery.js">< ...

  3. lazy load 图片延迟加载 跟随滚动条

    http://plugins.jquery.com/lazyload/ Jquery.LazyLoad.js插件参数详解: 1,用图片提前占位 placeholder : "img/grey ...

  4. 使用jquery插件实现图片延迟加载技术(懒加载)

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  5. JQuery LazyLoad实现图片延迟加载-探究

    对于大量图片的网站,图片延迟加载是提高速度和性能的好方法. 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片).大体常用的 ...

  6. jquery.lazyload.js 图片延迟加载

    当做网页的时候,特别是整个网页展示图片较多的时候,用到图片延迟效果是很好的 使用方法也非常简单. 1.在网页任何位置(一般是在</body>前面)加上如下代码(注意<script&g ...

  7. jquery.lazyload 实现图片延迟加载jquery插件

    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..   什么是ImageLazyLoad技术 在页面上图 ...

  8. jquery.lazyload.js图片延迟加载

    转:http://www.jb51.net/article/50273.htm 这篇文章主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下   ...

  9. jquery.lazyload.js图片延迟加载(懒加载)--转载

    一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...

随机推荐

  1. CCAN:C语言的模块仓库

    实践中一门编程语言是否有用.好不好,不仅体现在语言本身,更在语言的生态系统:用的人多不多.社区是否活跃互帮互助.语言的相关库和框架质量如何,还有就是已有的模块的质量与数量. CPAN(Comprehe ...

  2. VMware虚拟机ping出现DUP!

    VMware虚拟机ping出现DUP!   ping 外网, 还是ping 网关都出现DUP! 百度查了许久,各种方法都无效,无奈只能google看老外的方法. http://codeblog.co. ...

  3. Open Wifi SSID Broadcast vulnerability

    Open Wifi SSID Broadcast vulnerability 0x00 前言 前几天,看到微博上@RAyH4c分享了一份老外关于wifi钓鱼的文章,觉得挺好的,便翻译了一下.第一次翻译 ...

  4. 解决:安装SQl 2008为SQL Server代理服务提供的凭据无效

    Q: 在Windows Server 2008安装SQL Server 2008出现的问题: 安装时在“服务器配置”环节出现以下问题:为sql server代理服务提供的凭据无效为sql server ...

  5. 华为u8800+ root 还是不能删除自带软件

    下载个RE文件管理器 进入RE文件管理器后把上面的只读改成读写(ROOT过的点一下上面的只读就可以了) 再进入cust文件夹然后f---/cn/app 在这个文件夹里长按你要删除的定制软件 出来有个删 ...

  6. PCanywhere/teamviewer/RDP/ultraVNC/tigerVNC/realVNC/Xmanager

    PCanywhere/teamviewer/RDP/ultraVNC/tigerVNC/realVNC/Xmanager 1, 通常应用场景一般CentOS/RHEL等linux系统不配置安装Desk ...

  7. linux 建库,编码,导入数据

    二.导入数据库1.首先建空数据库mysql>create database abc; 2.导入数据库方法一:(1)选择数据库mysql>use abc;(2)设置数据库编码mysql> ...

  8. HTML5迷你游戏作验证码

    验证码最常见的是各种变形的字符,因为识别程序进化得越来越聪明,验证码也变得越来越难以识别,给用户造成了很多的麻烦和反感. 已经有很多人尝试过各种改进的验证码,比如动画的验证码,做题目的验证码,要回答问 ...

  9. Eclipse Tomcat : Project facet Java version 1.7 is not supported.

    在Eclipse打开一个项目,并用Tomcat运行时,报错:Project facet Java version 1.7 is not supported. 大致的截图如下: "项目中的jd ...

  10. jquery1.7.2的源码分析(五)$.support

    $.support 的英文注释很详细的介绍的这里,就稍微的写了下 Query.support = (function() { var support, all, a, select, opt, inp ...