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. CDH集群集成kafka

    搭建要求: 1.CDH环境已经搭建成功,在CDH上搭建kafka.要求用CDH上zookeeper管理kafka而不用kafka自带的zookeeper 2.kafka_2.11-0.8.2.1.tg ...

  2. apue学习笔记（第六章 系统数据文件和信息）

    UNIX系统的正常运作需要使用大量与系统有关的数据文件,例如,口令文件/etc/passwd和组文件/etc/group就是经常被多个程序频繁使用的两个文件. 口令文件 UNIX系统口令文件包含如下字 ...

  3. 在非主线程中更新UI

    在非主线程中调用了showMessage方法,结果报错:Can't create handler inside thread that has not called Looper.prepare() ...

  4. JSF教程（8）——生命周期之Apply Request Values Phase

    当一个组件树在一个postbacks请求中被恢复之后其中每一个组件从request的參数中取得各自的值,这里使用的是processDecodes方法. 这个值会保存在本地的每一个组件中,在源代码中此过 ...

  5. dm8148 videoM3 link源代码解析

    样例:从A8送一帧jpeg图片到videoM3解码,然后在将解码的数据传递到A8, 这个流程涉及的link源代码例如以下: dm8148 link之间数据传递 1)在A8上调用IpcBitsOutLi ...

  6. Pyqt4 360界面风格皮肤实现

    前言 最近用Pyqt做了软件界面,始终觉得windows风格不太好看,虽然数字公司的行为有争议,但是也不影响我欣赏360卫士的界面风格. 声明 首先声明,此项工作并非原创,而是基于这位zhuyeqin ...

  7. mybatis的两种分页方式:RowBounds和PageHelper

    原理:拦截器. 使用方法: RowBounds:在mapper.java中的方法中传入RowBounds对象. RowBounds rowBounds = new RowBounds(offset, ...

  8. WinForm程序打包工具InnoSetup使用说明图文教程

    WinForm程序打包工具InnoSetup使用说明图文教程 WinForm程序开发测试好了,如果将Debug/Release里面的文件发给客户使用,会让客户觉得你不够专业,但是使用VS自带的打包工具 ...

  9. sizeof运用

    解析:ss1是一个字符指针,指针的大小是一个定值,就是4字节,所以sizeof(ss1)是4字节.ss2是一个字符数组,这个数组最初未定大小,由具体填充值来定.填充值是“0123456789”.1个字 ...

  10. 五个知识体系之-SQL语句大全

    一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备 ...