在写代码的时候，经常会用到懒加载的模式，以前是通过window.onload的模式去加载，但是图片很多或者用ajax请求的时候，就会很麻烦，现在用lazyload的模式加载方便很多

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Lazy Load Enabled</title>

<!--[if lt IE 9]>

    <script src="html5shiv.js"></script>

<![endif]-->

</head>

<body>

<img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">

<img class="lazy" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">

<img class="lazy" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1">

<img class="lazy" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">

<img class="lazy" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">

<img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">

<script src="jquery-1.11.0.min.js"></script>

<script src="jquery.lazyload.js?v=1.9.1"></script>

<script type="text/javascript" charset="utf-8">

  $(function() {

      $("img.lazy").lazyload({effect: "fadeIn", placeholder : "img/grey.gif"});

  });

</script>

</body>

</html>

　　

<img data-original="../img/banner.png" class="lazy" src="../img/loading.gif">

 //图片懒加载

      $("img.lazy").lazyload({effect: "fadeIn", placeholder : "../img/loading.gif"});

http://wechat.daopeng365.com/littileApple-lazy/page/index.html

缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解的更多相关文章

  1. 延迟加载图片的 jQuery 插件——lazyload.js

    lazyload 这个 jQuery 插件,是用来缓冲加载图片的插件.如果一篇文章很长有很多图片的话,下载图片就需要很多时间.而这款插件,会检测你的滚动情况,只有你要看到那个图片的时 候,它才会从后台 ...

  2. JQuery缓冲加载图片插件lazyload.js的使用方法

    lazyload.js是一个基于JQuery的插件,可以用来缓冲加载图片.如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动 ...

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

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

  4. jquery插件lazyload.js延迟加载图片的使用方法

    如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过 ...

  5. jquery 缓冲加载图片插件 jquery.lazyload

    第一:加入jquery 第二:加入jquery.lazy.load.js文件 第三:在网页中加<script> $(document).ready(function(){ $(" ...

  6. 移动端上拉加载下拉刷新插件-mescroll.js插件

    官网地址是:http://www.mescroll.com // 初始化mescroll function initMeScroll() { //创建MeScroll对象,内部已默认开启下拉刷新,自动 ...

  7. C# 加载图片image --（C#）Image.FromFile 方法会锁住文件的原因及可能的解决方法

    Image.FromFile 一旦使用后,对应的文件在一直调用其生成的Image对象被Disponse前都不会被解除锁定,这就造成了一个问题,就是在这个图形被解锁前无法对图像进行操作(比如删除,修改等 ...

  8. jQuery Ajax实例各种使用方法详解

    在jquery中ajax实现方法分类很多种,如有:load.jQuery.get.jQuery.post.jQuery.getScript.jQuery Ajax 事件.jQuery.ajaxSetu ...

  9. IDEA实用插件推荐及使用方法详解

    当前使用的IDEA版本是2020.1.随着IDEA版本的升级,有些插件不再支持,而有些插件变成了收费插件,这些插件将不再推荐.以下列举的,都是亲测可以在2020.1版本的IDEA中使用的插件. Tra ...

随机推荐

  1. 实现简单的AOP前置后置增强

    AOP操作是我们日常开发经常使用到的操作,例如都会用到的spring事务管理.今天我们通过一个demo实现对一个类的某一个方法进行前置和后置的增强. //被增强类 public class PetSt ...

  2. Ladon内网渗透扫描器PowerShell版

    程序简介 Ladon一款用于大型网络渗透的多线程插件化综合扫描神器,含端口扫描.服务识别.网络资产.密码爆破.高危漏洞检测以及一键GetShell,支持批量A段/B段/C段以及跨网段扫描,支持URL. ...

  3. mPython编程环境：Mu

    所谓编程环境,IDE ,就是这个软件里,用mPython写程序,新建文件,编辑 ,运行 ,调试 ,Mu还有一个重要功能烧录(flash),就是把我们的程序编译之后写到芯片中去. Mu下载,安装都很简单 ...

  4. MySql Packet for query is too large问题解决方案

    MySQL会限制Server接受的数据包大小.有时候插入.更新或查询时数据包的大小,会受 max_allowed_packet 参数限制,导致操作失败.报错信息为: Caused by: com.my ...

  5. 设置KAFKA

    让我们继续下载并设置Kafka,启动zookeeper,集群,生产者和消费者.   要下载Kafka,请参阅此链接  http://kafka.apache.org/downloads.html 下载 ...

  6. Lua table的remove函数

    [1]remove函数简介 table.remove(table, pos): 返回table数组中位于pos位置的元素,其后的元素会被前移. pos参数可选, 默认为table长度, 即从最后一个元 ...

  7. JS异步操作概述（转）

    add by zhj: 只转载了一部分.异步操作的三种模式未转载,因为里面代码比较多,复制过来麻烦 原文:https://wangdoc.com/javascript/async/general.ht ...

  8. APIO2019简要题解

    Luogu P5444 [APIO2019]奇怪装置 看到这种题,我们肯定会想到\((x,y)\)一定有循环 我们要找到循环节的长度 推一下发现\(x\)的循环节长为\(\frac{AB}{B+1}\ ...

  9. Django TypeError: render() got an unexpected keyword argument 'renderer'

    场景: Xadmin添加plugin 来源: 1. xadmin与DjangoUeditor的安装 (第3.3章节) 2. 增加富文本编辑器Ueditor (第14.7章节) 报错: Django T ...

  10. spring接口文档注解：@ApiOperation

    @ApiOperation不是spring自带的注解是swagger里的 com.wordnik.swagger.annotations.ApiOperation; @ApiOperation和@Ap ...