使用方法

引用jquery和jquery.lazyload.js到你的页面

1
2
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script>

html图片调用方法

为图片加入样式lazy  图片路径引用方法用data-original

1
2
3
4
5
6
<img class="lazy" data-original="img/bmw_m1_hood.jpg">
<img class="lazy" data-original="img/bmw_m1_side.jpg">
<img class="lazy" data-original="img/viper_1.jpg">
<img class="lazy" data-original="img/viper_corner.jpg">
<img class="lazy" data-original="img/bmw_m3_gt.jpg">
<img class="lazy" data-original="img/corvette_pitstop.jpg">

js初始化lazyload并设置图片显示方式

1
2
3
4
5
<script type="text/javascript" charset="utf-8">
  $(function() {
      $("img.lazy").lazyload({effect: "fadeIn"});
  });
</script>

在图片中也可以不使用 class="lazy",初始化时使用:

1
$("img").lazyload({effect: "fadeIn"});

这样就可以对全局的图片都有效!

如果想提前载入图片,可以使用 threshold 进行设置,

1
$("img.lazy").lazyload({ threshold :180});

以上实例的含义是:在图片距离屏幕180px时提前载入:

引入

1
2
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script>

路径依据实际目录来确定。

1
2
3
4
5
<script type="text/javascript" charset="utf-8">
  $(function() {
      $("img.lazy").lazyload({effect: "fadeIn"});
  });
</script>

图片引用lazyload 方式

1
<img class="lazy" data-original="img/bmw_m1_hood.jpg"  />

参数设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("img.lazy").lazyload({
  placeholder : "img/grey.gif"//用图片提前占位
    // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
  effect: "fadeIn"// 载入使用何种效果
    // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
  threshold: 200, // 提前开始加载
    // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
  event: 'click',  // 事件触发时才加载
    // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
  container: $("#container"),  // 对某容器中的图片实现效果
    // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
  failurelimit : 10 // 图片排序混乱时
     // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});

jQuery图片延迟加载插件jQuery.lazyload 的使用的更多相关文章

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

      插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...

  2. jQuery图片延迟加载插件jQuery.lazyload使用方法(转)

    使用方法 1.引用jquery和jquery.lazyload.js到你的页面 <script src="jquery-1.11.0.min.js"></scri ...

  3. jQuery图片延迟加载插件jquery.lazyload.js

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

  4. 第一次自己写jquery图片延迟加载插件,不通用,但修改一下还是可以使用到很多页面上的

    不断修改完善中…… /*! * jquery.lazyoading.js *自定义的页面图片延迟加载插件,比网上的jquery.lazyload简单,也更适合自己的网站 *使用方法: 把img 的cl ...

  5. jQuery图片切换插件jquery.cycle.js

    Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...

  6. JQuery图片延迟加载插件,动态获取图片长宽尺寸

    以前的网站带宽小,没有特别多的大图,现在不同了,各种图片网站如同雨后春笋层出不穷.服务器是抗住了,但是客户端就有意见了,太多的图片必然导致页面加载缓慢,特别是有些table结构的站点更是如此.能否让图 ...

  7. jquery图片切换插件jquery.cycle.js参数详解

    转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...

  8. jQuery图片延迟加载插件:jquery.lazyload

    ----------------------------------------------------------------------------------------------- clas ...

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

    最新版的jquery.lazyload.js已不再是伪的延迟加载了 一.请按照基本使用方法说明设置 //载入JavaScript 文件 <script src="jquery.js&q ...

随机推荐

  1. HNOI模拟 Day3.23

    一.拓扑(top)[ 题目描述]:给你一个有向二分图,求他的拓扑序列的个数.[ 输入]:第一行两个数 N,M,表示点数和边数.接下来 M 行每行两个数 a,b,表示 a 向 b 有一条有向边.[ 输出 ...

  2. 解决ES集群状态异常教程(存在UNASSIGNED)

    解决ES集群状态异常教程(存在UNASSIGNED)_百度经验 https://jingyan.baidu.com/article/9158e00013f787a255122843.html

  3. 下载的php_yal.dll文件添加到php的ext

    下载的php_yal.dll文件添加到php的ext http://pecl.php.net/package/yaf/3.0.6/windows yaf. use_namespace=1 ;;exte ...

  4. ABAP OLE

    OLE DATA: excel TYPE ole2_object, workbook TYPE ole2_object, sheet TYPE ole2_object, cell TYPE ole2_ ...

  5. sql 2005 win7 64 数据引擎

    有个箭头,下拉,选择服务器名(就是本机的名称),如果没有就选择浏览更多,看能搜索出不还没的话就手动输入localhost

  6. Linux/Android——Input系统之InputMapper 处理 (八)【转】

    本文转载自:http://blog.csdn.net/jscese/article/details/43561773 前文Linux/Android——Input系统之InputReader (七)介 ...

  7. 在vs2017中创建Node.js项目

    https://github.com/Microsoft/nodejstools/wiki/Projects 1. 安装vs2017的时候,需要勾选Node.js 2.新建项目的时候,选择其他语言,然 ...

  8. luogu 3388 【模板】割点(割顶)

    点双. #include<iostream> #include<cstdio> #include<cstdlib> #include<cstring> ...

  9. bzoj4869

    http://www.lydsy.com/JudgeOnline/problem.php?id=4869 终于A了...参考了下dalao的代码... 拓展欧几里得定理,改了几次就不变了,但是用的时候 ...

  10. bzoj 1778: [Usaco2010 Hol]Dotp 驱逐猪猡【dp+高斯消元】

    算是比较经典的高斯消元应用了 设f[i]为i点答案,那么dp转移为f[u]=Σf[v]*(1-p/q)/d[v],意思是在u点爆炸可以从与u相连的v点转移过来 然后因为所有f都是未知数,高斯消元即可( ...