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();

本文出自于此

时间: 2024-08-03 17:02:55

jQuery Lazy Load 图片延迟加载的相关文章

jQuery Lazy Load图片懒加载

传送门:官网地址,jQuery Lazy Load v1.7.2下载,Github 使用方法: 1.引用js文件 <script src="jquery.js"></script> <script src="jquery.lazyload.js"></script> 2.修改HTML代码中需要修改的IMG标签 <!-- 将真实图片地址写在 data-original 属性中,而 src 属性中的图片换成占位符的图

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

有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的. 这里推荐使用jquery图片延迟加载插件jquery.lazyload实现图片延迟加载提高网站打开速度 下载地址:http://www.appelsiini.net/download/jquery.lazyload.js 修正版:jquery.lazyloa

JQuery LazyLoad实现图片延迟加载-

方法是我们事先输出占位符,然后通过js判断滚动位置替换img的src为真实图片即可. 扩展后的LazyLoad.js如下: /* * Lazy Load - jQuery plugin for lazy loading images * * Copyright (c) 2007-2009 Mika Tuupola * * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * *

jquery.lazyload.js 图片延迟加载

当做网页的时候,特别是整个网页展示图片较多的时候,用到图片延迟效果是很好的 使用方法也非常简单. 1.在网页任何位置(一般是在</body>前面)加上如下代码(注意<script>引用的两个js文件,路径自行设定): <script src="js/jquery.min.js"></script> <script src="js/jquery.lazyload.min"></script> &l

jquery.lazyload.js图片延迟加载

一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置.这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度.浏览器将会在 加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.  二.插件作者下载地址 JS下载:http://www.ijquery.cn/js/lazyloa

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

看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数 据量的交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条 下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升. 怎么实现ImageLazyLoad 一.使用J

jquery lazy load

LazyLoad是一个Js编写的Jq插件,它可以延迟加载页面中的图片,在浏览器可视范围中的图片会被加载.如何使用:LazyLoad依赖于Jquery,在html的结尾处 ,就是在</body>前.<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.la

使用jQuery lazyload 实现图片延迟加载

下载地址 使用说明 0. 准备工作 下载jQuery和lazyload 插件(地址如上) 1. HTML 引入jQuery库和lazyload插件 1 <div id="imagesContainer"></div> 2 <!--<img class="lazy" data-original="img/example.jpg" width="750" height="450&quo

jquery插件实现图片延迟加载(lazyload.js)

http://www.cnblogs.com/tinyphp/archive/2013/04/09/3009385.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/x