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. 如何在Raspberry Pi 3B中安装RASPBIAN

    RASPBIAN简介 RASPBIAN是树莓派官方支持的基于Debian的Linux系统.RASPBIAN预装了很多常用的组件,使用起来十分方便. 官方有RASPBIAN STRETCH WITH D ...

  2. poj 2905 双向队列(待补充)

    Parallel Computer Simulator   Description Programs executed concurrently on a uniprocessor system ap ...

  3. 微信公众号开发系列-获取微信OpenID

    在微信开发时候在做消息接口交互的时候须要使用带微信加密ID(OpenId),下面讲讲述2中类型方式获取微信OpenID.接收事件推送方式和网页授权获取用户基本信息方式获取. 1.通过接收被动消息方式获 ...

  4. python文件和文件夹訪问File and Directory Access

    http://blog.csdn.net/pipisorry/article/details/47907589 os.path - Common pathname manipulations 都是和路 ...

  5. Java -Xms -Xmx -Xss -XX:MaxNewSize -XX:MaxPermSize含义记录

    出现java.lang.OutOfMemoryError异常时,常使用的方法便是将例如以下配置语句: -Xms512m -Xmx512m -Xss1024k -XX:MaxNewSize=256M - ...

  6. Memcached的安装与简单使用

    Memcached下载 如果是Win10系统,还需要单独安装telnet服务,因为Win10把它给阉掉了.(默认下一步下一步安装) 一.安装Memcached 将Memcached解压到目录,以管理员 ...

  7. IdentityServer(12)- 使用 ASP.NET Core Identity

    IdentityServer具有非常好的扩展性,其中用户及其数据(包括密码)部分你可以使用任何想要的数据库进行持久化. 如果需要一个新的用户数据库,那么ASP.NET Core Identity是你的 ...

  8. CS:APP3e 深入理解计算机系统_3e Attacklab 实验

    详细的题目要求和资源可以到 http://csapp.cs.cmu.edu/3e/labs.html 或者 http://www.cs.cmu.edu/~./213/schedule.html 获取. ...

  9. iOS 类似朋友圈的图片浏览器SDPhotoBrowser

    SDPhotoBrowser.Demo 1.在文件SDBrowserImageView.m中有用SDWebImage到网络加载图片 需要的注释去掉即可 #import "ViewContro ...

  10. iOS 应用中加载文档pdf/word/txt

    一.加载PDF文档:应用内打开文档.手机中其他应用打开文档 Demo 首先拖入一个文档pdf.word.txt,打开不同的文档知识 文件名字.类型修改即可 #import "ReadView ...