个人理解：将须要延迟载入的图片的src属性所有设置为一张同样尽可能小(目的是尽可能的少占宽带，节省流量，因为缓存机制，当浏览器载入了一张图片之后，同样的图片就会在缓存中拿。不会又一次到server上拿)的图片，然后将图片的实际地址写在alt属性里，当鼠标往下滑动的时候得到当前显示区域内的img的lz-src，动态的就将各自的lz-src属性的值赋值给src属性。这样就实现了图片延迟载入，减轻server端的压力，节省本地带宽，提升了訪问网页的速度

 

插件源代码地址: https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

jQuery下载地址：http://jquery.com/

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/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script type="text/javascript" src="js/jquery-1.4.3.min.js" ></script>

<script type="text/javascript" src="js/lazyload.js"></script>

<script type="text/javascript"> //初始化代码

$(document).ready(function()

{

    $("img[name='lazy']").lazyload({

        placeholder : "images/默认图片.jpg",

        effect : "fadeIn"

    });

});

</script>

<title>无标题文档</title>

</head>

<body>

<img src="images/默认图片.jpg" width="100px" height="300px" name="lazy" lz-src="images/商品图片1.jpg"/><br />

<img src="images/默认图片.jpg" width="100px" height="300px" name="lazy" lz-src="images/商品图片2.jpg"/><br />

<img src="images/默认图片.jpg" width="100px" height="300px" name="lazy" lz-src="images/商品图片3.jpg"/><br />

<img src="images/默认图片.jpg" width="100px" height="300px" name="lazy" lz-src="images/商品图片4.jpg"/><br />

<img src="images/默认图片.jpg" width="100px" height="300px" name="lazy" lz-src="images/商品图片5.jpg"/><br />

<img src="images/默认图片.jpg" width="100px" height="300px" name="lazy" lz-src="images/商品图片6.jpg"/><br />

</body>

</html>

jquery.lazyload.js实现图片懒载入的更多相关文章

  1. jquery.lazyload.js实现图片懒加载

    个人理解:将需要延迟加载的图片的src属性全部设置为一张相同尽可能小(目的是尽可能的少占宽带,节省流量,由于缓存机制,当浏览器加载了一张图片之后,相同的图片就会在缓存中拿,不会重新到服务器上拿)的图片 ...

  2. lazyload.js实现图片异步载入

    所谓图片异步加载,意思是不用一次把图片全部加载完,你可以叫它延迟加载,缓冲加载都行. 看看你有没有这种需求:某篇文章图片很多,如果在载入文章时就载入所有图片,无疑会延缓载入速度,让用户等更久,所以,我 ...

  3. Jquery.LazyLoad.js实现图片延迟加载功能

    从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了 ...

  4. JS怎样实现图片的懒加载以及jquery.lazyload.js的使用

    在项目中有时候会用到图片的延迟加载,那么延迟加载的好处是啥呢? 我觉得主要包括两点吧,第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度:第二是帮助降低服务器负担. 下面介绍一下常用的延迟 ...

  5. jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

    jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...

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

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

  7. 懒加载插件- jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  8. jquery懒加载jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  9. jQuery图片延迟加载插件jquery.lazyload.js

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

随机推荐

  1. HDU 2894 DeBruijin (数位欧拉)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2894 题目大意:旋转鼓的表面分成m块扇形,如图所示(m=8).图中阴影区表示用导电材料制成,空白区用绝 ...

  2. jstat分析JVM内存

    zabbix: Jstat:gcutil:Old space utilization(%) S0  — Heap上的 Survivor space 0 区已使用空间的百分比S1  — Heap上的 S ...

  3. python discover 函数介绍

    discover(start_dir,pattern='test*.py',top_level_dir=None)找到指定目录下所有测试模块,并可递归查到子目录下的测试木块,只有匹配到的文件名才会被加 ...

  4. C#取色器

    闲来无事,就写了一个取色器.原理其实很简单,只需要两步, 获取鼠标光标的位置, 获取当前鼠标光标的位置的RGB颜色值. 获取鼠标光标的位置: System.Drawing.Point p = Mous ...

  5. STM32 磁场传感器HMC5883

    一.IIC协议 默认(出厂) HMC5883LL 7 位从机地址为0x3C 的写入操作,或0x3D 的读出操作. 要改变测量模式到连续测量模式,在通电时间后传送三个字节:0x3C 0x02 0x00 ...

  6. IEEEXtreme 10.0 - Always Be In Control

    这是 meelo 原创的 IEEEXtreme极限编程大赛题解 Xtreme 10.0 - Always Be In Control 题目来源 第10届IEEE极限编程大赛 https://www.h ...

  7. 解决 VUE 微信 IOS 路由跳转问题

    watch: { "$route"(){ if (/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)) { location.hre ...

  8. APS高级计划排程系统应该支持的企业应用场景

    APS高级计划排程系统应该支持的企业应用场景 面对工业4.0智能制造的挑战,很多企业希望能够引进APS高级计划排程系统,全自动的.快速的制定精细化的生产计划,准确的计算产线/设备上各种产品型号的加工顺 ...

  9. 【Java】 奇偶数的判断

    判断方法(奇数): 错误判断方法:通过a%2==1来判断.(原因:负奇数对2取余的结果为-1) 正确判断方法:(1) 通过a%2!=0来判断.                          (2) ...

  10. CodeForces 772A Voltage Keepsake

    二分答案,验证. 二分到一个答案,比他小的时间都需要补充到这个时间,计算所需的量,然后和能提供的量进行比较. #include <cstdio> #include <cmath> ...