• 图片懒加载插件lazyload使用方法


    图片懒加载插件lazyload使用方法

    一、如何使用:

    Lazy Load 依赖于 jQuery。引入文件

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

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

    图片基本属性的设置

    <img class="lazy"  src="img/grey.gif"   alt=""  width="640"  height="480"  data-original="img/example.jpg" />

    最后使用:

    $(function() {

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

    });

    二、基本选项:

    1、设置临界点

    默认情况下图片会出现在屏幕时加载如果你想提前加载图片可以设置threshold 选项设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.

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

        threshold : 200

    });

    2、设置事件来触发加载

    你可以使用jQuery事件,例如clickmouseover。也可以使用自定义事件。

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

        event : "click"

    });

    3、使用特效

    默认情况下,插件等待图像完全加载并调用show()。你可以使用任何你想要的效果。下面的代码使用fadeIn (淡入效果)。

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

        effect : "fadeIn"

    });

    4、加载隐藏的图片

     为了提升性能, Lazy Load 默认忽略了隐藏图片如果你想要加载隐藏图片请将 skip_invisible 设为 false

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

        skip_invisible : false

    });

  • 相关阅读:
    又一种Mysql报错注入
    PHP wget 增强脱裤脚本(PDO MYSQL)
    一种少见的跨目录写webshell方法
    过狗一句话
    在myql sqlserver里边怎么快速找到带有关键字的表
    php读取3389脚本
    学习OpenCV,看这些!
    Git 学习看这篇就够了!
    开发工具使用技巧和插件大总结
    (资源整理)带你入门Spark
  • 原文地址:https://www.cnblogs.com/wbxjiayou/p/5157576.html
Copyright © 2020-2023  润新知