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张可见区域外的图片,以避免出现这个问题.
});

今天遇到一个问题，就是当加载的时候把enent改成click无效的问题，后面查明这个插件一定要是当前页面未显示的情况下才会执行，也就是说当打开网页的时候看不到的情况下才有效...

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title>This is a ajax test</title>
  7.         <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
  8.         <script type="text/javascript" src="js/test_js.js"></script>
  9.         <script type="text/javascript" src="js/jquery.lazyload.js"></script>
  10.         <script type="text/javascript">
  11.              $(function(){
  12.                  $("img.lazy").lazyload({
  13.                      placeholder : "img/viewphoto.jpg",
  14.                      effect: "fadeIn",
  15.                      event:"click"
  16.                  });
  17.              });
  18.         </script>
  19.         <link rel="stylesheet" href="css/img.css" />
  20.     </head>
  21.  
  22.     <body>
  23.         <img class="lazy"  data-original="img/bmw_m1_hood.jpg" width="100px" height="100px">
  24.         <img class="lazy"  data-original="img/bmw_m1_side.jpg" width="100px" height="100px">
  25.         <img class="lazy"  data-original="img/viper_1.jpg" width="100px" height="100px">
  26.         <img class="lazy"  data-original="img/viper_corner.jpg" width="100px" height="100px">
  27.         <img class="lazy"  data-original="img/bmw_m3_gt.jpg" width="100px" height="100px">
  28.         <img class="lazy"  data-original="img/corvette_pitstop.jpg" width="100px" height="100px">
  29.     </body>
  30.  
  31. </html>
  32.  
  33. .lazy{
  34.     margin-top: 1000px;
  35. }

更多内容可以查看http://www.jq22.com/jquery-info390

一般异步加载图片可以采用ajax异步加载图片url，然后在给lazyload改变data-origin去实现

lazyload的使用心得的更多相关文章

  1. 前端性能优化--图片懒加载(lazyload image)

    话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...

  2. 我的MYSQL学习心得（一） 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  3. NoSql数据库使用半年后在设计上面的一些心得

    NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...

  4. TypeScript为Zepto编写LazyLoad插件

    平时项目中使用的全部是jQuery框架,但是对于做webapp来说jQuery太过于庞大,当然你可以选择jQuery 2.*针对移动端的版本. 这里我采用移动端使用率比较多的zepto框架,他跟jqu ...

  5. 我的MYSQL学习心得（二） 数据类型宽度

    我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  6. 我的MYSQL学习心得（三） 查看字段长度

    我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  7. 我的MYSQL学习心得（四） 数据类型

    我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(五) 运 ...

  8. 我的MYSQL学习心得（五） 运算符

    我的MYSQL学习心得(五) 运算符 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...

  9. 我的MYSQL学习心得（六） 函数

    我的MYSQL学习心得(六) 函数 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

随机推荐

  1. Ubuntu 安装Logstash

    Logstash 包是从同一存储库中可用,如 Elasticsearch,和我们已经安装了该公钥,因此,让我们共创 Logstash 源列表︰ echo 'deb http://packages.el ...

  2. MySql数据查询的逻辑蕴含条件问题

    SQL语言中没有蕴含逻辑运算.但是,可以利用谓词演算将一个逻辑蕴含的谓词等价转换为:p->q ≡┐p∨q. 我们通过一个具体的题目来分析:(具体的表和数据详见文章:Mysql数据库中的EXIST ...

  3. Material使用07 MdGridListModule的使用

    1 MatGridListModule简介 对相似数据的展现,尤其是像是图片的展示 使用起来很像表格 官方文档:点击前往 2 MatGridListModule提供的指令 2.1 mat-grid-l ...

  4. 38、EST序列拼接流程

    转载:http://fhqdddddd.blog.163.com/blog/static/18699154201241014835362/ http://blog.sina.com.cn/s/blog ...

  5. vue.js2.0实战(1):搭建开发环境及构建项目

    Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...

  6. Go语言——没有对象的面向对象编程

    本文译自Steve Francia在OSCON 2014的一个PPT,原作请前往:https://spf13.com/presentation/go-for-object-oriented-progr ...

  7. 第三方登录---微信（使用laravel插件）

    转发: https://www.jianshu.com/p/7be757655814 TP框架: http://www.php.cn/php-weizijiaocheng-363509.html

  8. 洛谷P1800 software_NOI导刊2010提高（06）

    P1800 software_NOI导刊2010提高(06) 题目描述 一个软件开发公司同时要开发两个软件,并且要同时交付给用户,现在公司为了尽快完成这一任务,将每个软件划分成m个模块,由公司里的技术 ...

  9. Mysql-2-数据库基础

    (1)mysql是一个小型关系型数据库管理系统. (2)mysql是一个快速.多线程.多用户.健壮的SQL数据库服务器.与其他数据库管理系统比,mysql有以下的优势: mysql是一个关系数据库管理 ...

  10. oracle例程

    原创转载请注明出处 启动例程: 数据库启动例程的3个步骤 启动例程(NOMOUNT状态):读取参数文件,分配SGA和启动后台进程. 装载数据库(MOUNT状态):根据初始化参数control_file ...