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

 

插件源码地址: 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="data:images/默认图片.jpg" width="100px" height="300px" name="lazy" lz-src="data:images/商品图片1.jpg"/><br />
<img src="data:images/默认图片.jpg" width="100px" height="300px" name="lazy" lz-src="data:images/商品图片2.jpg"/><br />
<img src="data:images/默认图片.jpg" width="100px" height="300px" name="lazy" lz-src="data:images/商品图片3.jpg"/><br />
<img src="data:images/默认图片.jpg" width="100px" height="300px" name="lazy" lz-src="data:images/商品图片4.jpg"/><br />
<img src="data:images/默认图片.jpg" width="100px" height="300px" name="lazy" lz-src="data:images/商品图片5.jpg"/><br />
<img src="data:images/默认图片.jpg" width="100px" height="300px" name="lazy" lz-src="data:images/商品图片6.jpg"/><br />

</body>
</html>

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

  1. js插件---图片懒加载lazyload

    js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...

  2. js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

    js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...

  3. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

  4. Js 之图片懒加载插件

    一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...

  5. JS实现图片懒加载插件

    一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...

  6. js实现图片懒加载

    大型购物网站都会采用图片懒加载技术来优化网站首页打开速度,以提高用户体验,那么具体是怎么实现的呢,我们一探究竟. html结构(div包裹一层用来显示背景图片,等待图片加载完成后,显示真实图片) &l ...

  7. 原生js实现图片懒加载+加入节流

    这两天在学习图片的懒加载实现,看了很多大佬的博客,终于有了点成果.现在用了其中一位大佬的文章中的代码实现了图片懒加载并且在其基础上加入了节流函数. 原理就不多讲了,有需要的可以去大佬的文章看看.大佬文 ...

  8. js原生图片懒加载 或 js原生图片预加载，html标签自定义属性

    使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...

  9. js, javascript 图片懒加载 实例代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. bzoj 2655: calc [容斥原理 伯努利数]

    2655: calc 题意:长n的序列,每个数\(a_i \in [1,A]\),求所有满足\(a_i\)互不相同的序列的\(\prod_i a_i\)的和 clj的题 一下子想到容斥,一开始从普通容 ...

  2. BZOJ 1115: [POI2009]石子游戏Kam [阶梯NIM]

    传送门 有N堆石子,除了第一堆外,每堆石子个数都不少于前一堆的石子个数.两人轮流操作每次操作可以从一堆石子中移走任意多石子,但是要保证操作后仍然满足初始时的条件谁没有石子可移时输掉游戏.问先手是否必胜 ...

  3. WinSock IOCP 模型总结(附一个带缓存池的IOCP类)

    前言 本文配套代码:https://github.com/TTGuoying/IOCPServer 由于篇幅原因,本文假设你已经熟悉了利用Socket进行TCP/IP编程的基本原理,并且也熟练的掌握了 ...

  4. ES6，Array.fill()函数的用法

    ES6为Array增加了fill()函数,使用制定的元素填充数组,其实就是用默认内容初始化数组. 该函数有三个参数. arr.fill(value, start, end) value:填充值. st ...

  5. linux目录结构 简单讲解

    1./- 根每一个文件和目录从根目录开始.只有root用户具有该目录下的写权限.请注意,/root是root用户的主目录,这与/.不一样 2./bin中 - 用户二进制文件包含二进制可执行文件.在单用 ...

  6. git取消文件跟踪

    在使用git的时候,有些文件是不需要上传的,所以就可以修改   .gitignore 例如: 如果是对所有文件都取消跟踪的话,就是 git rm -r -cached .  //不删除本地文件 git ...

  7. 利用ajax获取网页表单数据，并存储到数据库之一（使用JDBC）

    所谓JDBC就是利用java与数据库相连接的技术,从数据库获取既有的信息或者把网页上的信息存储到数据库. 这里简单的介绍公司的一个小项目中的一部分,由于代码较多,所以用图片形式进行展示.源码请查看源码 ...

  8. abp中文件下载，将内存数据导出到Excel并下载

    1.数据导出为Excel的Stream using System; using System.Collections.Generic; using System.IO; using Abp.Colle ...

  9. 机器学习03：K近邻算法

    本文来自同步博客. P.S. 不知道怎么显示数学公式以及排版文章.所以如果觉得文章下面格式乱的话请自行跳转到上述链接.后续我将不再对数学公式进行截图,毕竟行内公式截图的话排版会很乱.看原博客地址会有更 ...

  10. Servlet3.0上传图片示例

    一.前端JSP页面 <%@page pageEncoding="UTF-8"%><!DOCTYPE html><html><head> ...