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. linux个人情况总结

    linux主文件夹打不开 killall Nautilus linux下codeblocks编译文件权限不够,将文件建立在用户的目录下

  2. Java设计模式之职责链设计模式

    1.什么是-职责链设计模式 责任链模式是一种对象的行为模式.在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一条链.请求在这个链上传递,直到链上的某一个对象决定处理此请求.发出这个请求 ...

  3. hdu 5305 friends

    每一次比赛的时候脑子都卡顿, 这次更离谱,我居然二进制枚举边,这么大的复杂度.而且剪不了枝 后来学长说着是道爆搜.搜每一条边.恍然大悟. 仅仅须要剪掉点的度数是奇数的时候,或者他的线上朋友或线下朋友大 ...

  4. canvas绘制多边形

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

  5. intellij idea 在什么地方打开终端Terminal

    File→Plugins→Terminal 勾选它,点击Apply,点击Restart即可如果是要启动terminal则必须先做完上面动作,才可以点击Tools→Open Terminal... 来达 ...

  6. Exception in thread "main" java.lang.NoClassDefFoundError: org/springframework/boot/context/embedded/ServletRegistrationBean

    异常信息 2017-09-02 18:06:37.223 [main] ERROR o.s.boot.SpringApplication - Application startup failed ja ...

  7. 安装eclipse时跳转到网页提示JRE Missing

    可能的原因:jdk与安装的eclipse不兼容,可能64位机器安装了32位的jdk,导致64位的eclipse不能识别.

  8. scott表结构

  9. web前端优化整理(转)

    如今浏览器能够实现的特性越来越多,并且网络逐渐向移动设备转移,使我们的前端代码更加紧凑,如何优化,就变得越来越重要了. 开发人员普遍会将他们的代码习惯优先于用户体验.但是很多很小的改变可以让用户体验有 ...

  10. spring-struts2-mybatis-maven 转账开发记录

          最近写一个转账需求向外提供接口,用的是spring+struts2+maven 方式,数据库是oracle.我先新建maven类,然后引入spring相关jar包和mybatis包,配置s ...