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无效的问题，后面查明这个插件一定要是当前页面未显示的情况下才会执行，也就是说当打开网页的时候看不到的情况下才有效...

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>This is a ajax test</title>

        <script type="text/javascript" src="js/jquery-3.1.1.js"></script>

        <script type="text/javascript" src="js/test_js.js"></script>

        <script type="text/javascript" src="js/jquery.lazyload.js"></script>

        <script type="text/javascript">

             $(function(){

                 $("img.lazy").lazyload({

                     placeholder : "img/viewphoto.jpg",

                     effect: "fadeIn",

                     event:"click"

                 });

             });

        </script>

        <link rel="stylesheet" href="css/img.css" />

    </head>

    <body>

        <img class="lazy"  data-original="img/bmw_m1_hood.jpg" width="100px" height="100px">

        <img class="lazy"  data-original="img/bmw_m1_side.jpg" width="100px" height="100px">

        <img class="lazy"  data-original="img/viper_1.jpg" width="100px" height="100px">

        <img class="lazy"  data-original="img/viper_corner.jpg" width="100px" height="100px">

        <img class="lazy"  data-original="img/bmw_m3_gt.jpg" width="100px" height="100px">

        <img class="lazy"  data-original="img/corvette_pitstop.jpg" width="100px" height="100px">

    </body>

</html>

.lazy{

    margin-top: 1000px;

}

更多内容可以查看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. html文档树形结构图

  2. mysql更改时区

    set global time_zone = '+8:00'; ##修改mysql全局时区为北京时间,即我们所在的东8区 set time_zone = '+8:00'; ##修改当前会话时区 flu ...

  3. 11、比对软件STAR（https://github.com/alexdobin/STAR）

    转载:https://mp.weixin.qq.com/s?__biz=MzI1MjU5MjMzNA==&mid=2247484731&idx=1&sn=b15fbee5910 ...

  4. matlab基本语法和运算基础

    转载自:http://blog.csdn.net/robertcalm/article/details/51582253 matlab语法比较随意,但正如其全名 matrix &laborat ...

  5. HTML5程序开发范例宝典 完整版 (韩旭等著) 中文pdf扫描版

    HTML5程序开发范例宝典紧密围绕编程者在编程中遇到的实际问题和开发中应该掌握的技术,全面介绍了利用HTML进行程序开发的各方面技术和技巧.全书共16章,内容包括HTML网页布局.HTML基本元素.H ...

  6. 会过vip怎么赚钱？大学生，宝妈创业圈子

    会过vip怎么赚钱?是骗局吗1.如果说会过Vip不赚钱,那么一定是我们的没有时间去真心的热爱她:如果你对她如果你对它抱着一颗平和的心,认真的去分享,认真的去听一些前辈的经验,赚钱真的不是难事:2.如果 ...

  7. 计算像素亮度（Pixel Light）

    RGB有亮度吗?常用公式: Y(亮度)=(0.299*R)+(0.587*G)+(0.114*B)

  8. python的virtualenv环境与使用

    1.安装virtualenv 在安装virtualenv之前,我们需要安装至少有一个版本的Python:因为virtualenv是python的一个第三方模块,必须基于python环境才能安装: 如果 ...

  9. 2017-10-19 NOIP模拟赛

    Count(哈格朗日插值) 题解: 有个定理,另sum(x)表示小于等于x的数中与x互质的数的和 sum(x)=φ(x)*x/2    最后可知f(x)=x  (f(1)=2)  当然打表能知道. 然 ...

  10. 洛谷P3006 [USACO11JAN]瓶颈Bottleneck（堆模拟）

    传送门 感觉这题的思路还是挺不错的.然而为啥全网就一个题解而且只有代码……然后我只好看着代码理解了好久…… 题意就是有一棵树,每一个节点向他父亲节点连边,且有一个容量表示每一秒可以经过的牛的数量,每一 ...