zoukankan      html  css  js  c++  java
  • 图片延迟加载 jquery,lazyload.js 调用的demo

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>图片延迟加载练习</title>
    <script type="text/javascript" src="/loadimg/static/lazyload/jquery.js"></script>
    <script type="text/javascript" src="/loadimg/static/jquery.lazyload.js"></script>
    <!--这里有个稍微需要注意的地方就是在选择文件的时候建议下载原始的版本,网上有个修改版,我用的时候没有实现成功,换了原始版本一次就成功了(也可能是自己的问题)-->
    </head>
    <body>
    <div id="imglist">
    <img class="lazy" src="/loadimg/static/lazyload/grey.gif" data-original="/loadimg/static/lazyload/view1.png" width="640" heigh="480">
    <img class="lazy" src="/loadimg/static/lazyload/grey.gif" data-original="/loadimg/static/lazyload/view1.png" width="640" heigh="480">
    <img class="lazy" src="/loadimg/static/lazyload/grey.gif" data-original="/loadimg/static/lazyload/view1.png" width="640" heigh="480">
    <img class="lazy" src="/loadimg/static/lazyload/grey.gif" data-original="/loadimg/static/lazyload/view1.png" width="640" heigh="480">
    <img class="lazy" src="/loadimg/static/lazyload/grey.gif" data-original="/loadimg/static/lazyload/view1.png" width="640" heigh="480">
    <img class="lazy" src="/loadimg/static/lazyload/grey.gif" data-original="/loadimg/static/lazyload/view1.png" width="640" heigh="480">
    </div>
    </body>
    <script type="text/javascript">
    $(document).ready(
    function($){
    $("img.lazy").lazyload({//根据实际情况加载以下参数
    placeholder : "/loadimg/static/lazyload/grey.gif", //加载图片前的占位图片
    effect : "fadeIn", //加载图片使用的效果(淡入)
    threshold : 200, //提前开始加载,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.
    event : "click",//值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载
    ontainer: $("#imglist"),//值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
    failurelimit : 10//值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
    });
    });
    </script>
    </html>
  • 相关阅读:
    Leastsq 最小二乘法拟合一次函数简单入门例子
    Matplotlab 基础画图
    plot(x,y1,'g',x,y2,'b--o',x,y3,'c*') 方法中对数据类型的要求和线条类型和颜色的设置
    [Java] 获取255年前芝加哥格式化时间
    [SoapUI] 在Assertion和Groovy Script里获取RequestId
    [SoapUI] 在脚本里写code执行某个step
    [SoapUI] 获取TestStep的状态
    [SoapUI] 判断失败继续执行
    [Java] 获取两个日期间的所有日期
    [Excel] excel中如何快速统计出各个项出现的次数?
  • 原文地址:https://www.cnblogs.com/siki/p/4409079.html
Copyright © 2011-2022 走看看