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. 值得推荐的android开发框架简单介绍

    一些总结出来的Android高速开发框架,所有都是开源框架,附带项目地址,是开发学习的绝佳资料. Direct-Load-apk项目 项目主页地址:http://www.kymjs.com/ 功能:D ...

  2. 身份证识别接口编写的JAVA调用示例

    此java文章是基本聚合数据证件识别接口来演示,基本HTTP POST请求上传图片并接收JSON数据来处理. 使用前你需要通过 https://www.juhe.cn/docs/api/id/153 ...

  3. eclipse svn插件 删除原账号信息重新登录

    1.通过删除SVN客户端的账号配置文件    1)查看你的Eclipse中使用的是什么SVN Interface(中文:svn接口)windows > preference > Team ...

  4. iOS 依据文本内容为TextView动态定义高度

    解决方式: 1.定义一个textview,在storyboard中设定该textview的constraints. 2.将高度的constraint定义到头文件里:(直接拖拽) @property ( ...

  5. chm文件打不开的解决办法

    我今天在网上找了找C++函数库,下载下来一个 .chm 文件,打开之后发现只显示了目录,内容却显示不出来. 显示是这样:右边区域显示不出来. 在网上查了一下发现CHM文件是网上比较多的电子书籍显示格式 ...

  6. HDU - 3874 Necklace (线段树 + 离线处理)

    欢迎參加--每周六晚的BestCoder(有米! ) Necklace Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 65536/3 ...

  7. 35:字符串单词倒排 ReverseWords

    题目描述:对字符串中的所有单词进行倒排. 说明: 1.每个单词是以26个大写或小写英文字母构成: 2.非构成单词的字符均视为单词间隔符: 3.要求倒排后的单词间隔符以一个空格表示:如果原字符串中相邻单 ...

  8. Ubuntu下配置Nginx HTTPS

    HTTPS(全称:Hypertext Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版.即HTTP下加入S ...

  9. IP地址 网段的划分

    IP和子网掩码我们都知道,IP是由四段数字组成,在此,我们先来了解一下3类常用的IP A类IP段 0.0.0.0 到127.255.255.255  B类IP段 128.0.0.0 到191.255. ...

  10. HTTP状态码中301与302的区别

    301 Moved Permanently 被请求的资源已永久移动到新位置,并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一.如果可能,拥有链接编辑功能的客户端应当自动把请求的地址修改 ...