1.引入  jquery.lazyload.js

2. 延时加载的方式

<script type="text/javascript"> 
  $(function() { 
    $("img").lazyload({ 
    effect : "fadeIn" 
   }); 
  }); 
  </script>

3. 把阀值设置成200 意思就是当图片没有看到之前先load 200像素。

  $(“img”).lazyload({ threshold : 200 });

4.  通过设置占位符图片和自定事件来触发加载图片事件。如 event :sporty 和 event : foobar。默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片。

  $("img").lazyload({    
    placeholder : "img/grey.gif",    
    event : "click"   
    });

5.  带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.

  CSS:
  #container {    
  height: 600px;    
  overflow: scroll;    
  }   

  JavaScript 代码:
  $("img").lazyload({    
  placeholder : "img/grey.gif",    
  container: $("#container")    
  });

JQuery.lazyload 图片延迟加载的更多相关文章

  1. 关于lazyload图片延迟加载简单介绍

    LazyLoad大家再熟悉不过的一个jquery插件了,它可以延迟加载长页面中的图片. 也就是说在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才会加载并显示出来,这和图片预加载 ...

  2. jquery Loading图片延迟加载特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery实现图片延迟加载

    html: <img src ="占位图路径" data-original="真实图片路径" /> js: $("img").l ...

  4. Jquery.ScrollLoading图片延迟加载技术

    关于分屏加载图片,像天猫.京东等电商图片较多页面很长,就采用了延迟加载技术. 目前很流行的做法就是滚动动态加载,显示屏幕之外的图片默认是不加载的, 随着页面的滚动,显示区域图片才被动态加载. 原理其实 ...

  5. lazyload 图片延迟加载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jQuery前端插件以及图片延迟加载

    插件名称 用途 插件官网地址 fontawsome CSS图标插件 http://fontawesome.io easyui 基于jQuery的用户界面插件集合 http://www.jeasyui. ...

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

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

  8. [转载]jQuery.lazyload详解 - 图片延时加载

    jQuery实现图片延迟加载,不知道是否可以节省带宽呢?有人知道吗? 这究竟只是一个视觉特效还是真的能延迟加载减少服务器的请求呢? <script type="text/javascr ...

  9. jQuery Lazy Load 图片延迟加载

    基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. 版本: jQuery v1.4.4+ jQuery ...

随机推荐

  1. MERGE语法详解

    merge语法是根据源表对目标表进行匹配查询,匹配成功时更新,不成功时插入. 其基本语法规则是 merge into 目标表 a using 源表 b on(a.条件字段1=b.条件字段1 and a ...

  2. 移动端 cursor:pointer问题

    之前一直没有注意过,为元素设置上cursor:pointer属性后,会导致元素点击时出现一个蓝色的背景. 为元素设置-webkit-tap-highlight-color: transparent;可 ...

  3. applicaitonContext属性未注入, 请在applicationContext.xml中定义SpringContextHolder.

    我用的jeesite框架,在使用定时任务时,出现一些问题,,1.在windows上项目可以在tomcat下,运行2.在linux下项目在tomcatgh下,却出现问题: 15-Dec-2017 15: ...

  4. js onmouseover与onmouseout用法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. WebSocket解析

    WebSocket解析 转载请注明出处:WebSocket解析 现在,很多网站为了实现推送技术,所用的技术都是轮询.轮询是指在特定的时间间隔(如每一秒),由浏览器对服务器发起HTTP请求,然后由服务器 ...

  6. tf.train.ExponentialMovingAverage

    这个函数可以参考吴恩达deeplearning.ai中的指数加权平均. 和指数加权平均不一样的是,tensorflow中提供的这个函数,能够让decay_rate随着step的变化而变化.(在训练初期 ...

  7. Android Studio怎样选择查看指定进程的log?

    今天说一个简单的东东,关于Android Studio在logcat中怎样查看指定进程的log. 关于过滤你自己所开发的应用的log.在这篇文章中:Android Studio怎样给log加入过滤项( ...

  8. MySQL远程訪问的两个问题

    安装MySQL后,不能远程訪问.进行例如以下配置就可以 连接后,依旧不能连接,报例如以下错误: 1042 - Can't get hostname for your address 解决方法在my.i ...

  9. Mybatis+Oracle批处理

    1. 批处理 插入 非常多时候都涉及到一系列数据的插入,通过mybatis的动态sql语句可以非常好的解决问题.当然.oracle已经提供了批插入的语句: insert into students s ...

  10. ajaxSetup设置Ajax请求的默认值

    ajaxSetup() 方法为将来的 AJAX 请求设置默认值.语法$.ajaxSetup({name:value, name:value, ... }) 该参数为带有一个或多个名称/值对的 AJAX ...