html

<img class="lazy" src="data:images/src_unit.png" data-src="data:images/index/purchase.jpg" width="387px" height="365px">

注：其中src_unit.png 是一个1*1的透明png

css

img.lazy{

  background: url(../images/loading.gif) no-repeat center center;

  border: 0;

}

js

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

下载地址：http://code.ciaoca.com/jquery/lazyload/

延时加载 lazyload使用技巧的更多相关文章

  1. 前端实现图片懒加载(lazyload)的两种方式

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

  2. 懒加载lazyload

    什么是懒加载 懒加载就是当你做滚动到页面某个位置,然后再显示当前位置的图片,这样做可以减少页面请求. 懒加载:主要目的是作为服务器前端的优化,减少请求数或延迟请求数,一些图片非常多的网站中非常有用,在 ...

  3. 一段实现页面上的图片延时加载的js

    大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较 ...

  4. WinForm的延时加载控件概述

    这篇文章主要介绍了WinForm的延时加载控件,很实用的技巧,在C#程序设计中有着比较广泛的应用,需要的朋友可以参考下   本文主要针对WinForm的延迟加载在常用控件的实现做简单的描述.在进行C# ...

  5. js实现网页图片延时加载的原理和代码 提高网站打开速度

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

  6. Image Lazy Load：那些延时加载图片的开源插件(jQuery)

    图片延时加载技术对大流量的网站来说是十分实用的.目前图片在网站中大量使用,如果不加处理的话会对服务器和带宽造成级大压力,通过只渲染当前用户可见区域的图片,可以极大地减少网站的请求数,降低网络带宽资源. ...

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

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

  8. jQuery插件图片懒加载lazyload

    来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...

  9. 前端如何实现图片懒加载(lazyload) 提高用户体验

    定义 图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...

随机推荐

  1. C 共用体

    C 共用体 共用体是一种特殊的数据类型,允许您在相同的内存位置存储不同的数据类型.您可以定义一个带有多成员的共用体,但是任何时候只能有一个成员带有值.共用体提供了一种使用相同的内存位置的有效方式. 定 ...

  2. HDoj-1233-还是畅通project-prim算法

    还是畅通project Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tota ...

  3. bootstrap selectpicker使用问题

    文档查阅:http://silviomoreto.github.io/bootstrap-select/options/ 1.实用属性 size:5  表示下拉列表默认展示5行(ie8展示4.5行) ...

  4. 利用动态图添加Loading动画

    opacity:CSS3中的属性,调节透明度,一般取值0.5 添加思想: 1.对超链接添加点击事件,通过new {@onclick="showLoading()"} Html.Ac ...

  5. 新安装的金蝶K3软件，初始化后，在基础资料中对于币别，科目，部门，客户等资料均无法新增，无法引出，等操作，K3CASysSet.dll

    新装K3,新建的帐套.导入科目点菜单或新增button均无反应,币别.客户等辅助核算项目也新增也无法保存. 在电脑上新安装的金蝶K3软件.初始化后.在基础资料中对于币别,科目,部门,客户等资料均无法新 ...

  6. jquery实现图片的依次加载图片

    css代码: ul#portfolio{margin:0;padding:0;} ul#portfolio li{float:left;margin:0 5px 0 0;width:250px;hei ...

  7. C# Winform 运行异常 CefSharp.core.dll 找不到指定的模块

    C# Winform开发中使用了CefSharp,之前在VS2012中运行很正常,今天换了一台Windows XP 打开VS2010 运行时,发生异常:System.IO.FileNotFoundEx ...

  8. DML过程中记录错误日志

    当你插入几百万数据时,由于有几条脏数据而导致插入失败,是不是很恼火.10g R2之后有个新功能.将插入过程中失败的记录插入到还有一张表中. SQL> drop table test purge; ...

  9. 【Linux】 awk应用

    1  统计机器上处于不同状态的所有TCP连接的个数(TCP连接是有状态连接,包含SYN_RECV, ESTABLISHED, TIME_WAIT, FIN_WAIT0, FIN_WAIT1等多种状态, ...

  10. SQL Server 存储过程的几种常见写法分析，我们该用那种写法

    本文出处: http://www.cnblogs.com/wy123/p/5958047.html 最近发现还有不少做开发的小伙伴,在写存储过程的时候,在参考已有的不同的写法时,往往很迷茫,不知道各种 ...