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. base64加密PHP脚本的解码方法

    转自:http://yoursunny.com/t/2009/PHP-decode/ PHP是网站服务端最流行的编程语言之一.PHP运行环境本身是开源的,服务器不加载插件时PHP脚本也无法加密.但是, ...

  2. 出现“Windows资源管理器已停止工作”错误

    出现"Windows资源管理器已停止工作"错误 什么是资源管理器呢,explorer.exe进程的作用就是让我们管理计算机中的资源! 今天开电脑的时候就一直提示windows资源管 ...

  3. Shell脚本之：if-else

    Shell 有三种 if ... else 语句: 1.if ... fi 语句: 2.if ... else ... fi 语句: 3.if ... elif ... else ... fi 语句. ...

  4. struts2获取前台提交的参数

      CreateTime--2017年8月25日16:30:11 Author:Marydon struts2对获取前台提交参数的封装 需要导入: import java.util.Enumerati ...

  5. 【Python】分析文本split()

    分析单个文本 split()方法,是以空格为分隔符将字符串拆分成多个部分,并将这些部分存储到一个列表中 title = 'My name is oliver!' list = title.split( ...

  6. Node.js学习笔记（2）——关于异步编程风格

    Node.js的异步编程风格是它的一大特点,在代码中就是体现在回调中. 首先是代码的顺序执行: function heavyCompute(n, callback) { var count = 0, ...

  7. Lua学习五----------Lua循环

    © 版权声明:本文为博主原创文章,转载请注明出处 1.循环类型 1.1 while循环 - 语法:while(condition) do ...<执行语句> end - 解析:判断cond ...

  8. android 自己定义组件随着手指自己主动画圆

    首先自己定义一个View子类: package com.example.androidtest0.myView; import android.content.Context; import andr ...

  9. Java方法存在于哪一区

    Java运行时的数据区包括:(其中前两个是线程共享的) 1.方法区(Method Area)存储已被虚拟机加载的类信息.常量.静态变量.即编译器编译后的代码等数据 2.堆(Heap)存放对象实例,几乎 ...

  10. 牛牛有一个鱼缸。鱼缸里面已经有n条鱼，每条鱼的大小为fishSize[i] (1 ≤ i ≤ n,均为正整数)，牛牛现在想把新捕捉的鱼放入鱼缸。鱼缸内存在着大鱼吃小鱼的定律。经过观察，牛牛发现一条鱼A的大小为另外一条鱼B大小的2倍到10倍(包括2倍大小和10倍大小)，鱼A会吃掉鱼B。考虑到这个，牛牛要放入的鱼就需要保证：1、放进去的鱼是安全的，不会被其他鱼吃掉 2、这条鱼放进去也不能吃掉其他鱼

    // ConsoleApplication5.cpp : 定义控制台应用程序的入口点. // #include<vector> #include<algorithm> #inc ...