zoukankan      html  css  js  c++  java
  • jquery lazy load

    LazyLoad是一个Js编写的Jq插件,它可以延迟加载页面中的图片,在浏览器可视范围中的图片会被加载。
    如何使用:LazyLoad依赖于Jquery,在html的结尾处 ,就是在</body>前。
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.lazyload.js"></script>
    你必须改变图片的标签,图片的地址必须放到data-original属性上。给懒加载图片一个指定的class(例如:lazy)代码如下:
    html:<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
    js:$(function() {
    $("img.lazy").lazyload();
    })
    这会将所有图进行延迟加载
    设置临界点
    默认情况下只有图片出现在屏幕时才会加载,如果你想提前加载图片,那么可以设置threshold,这个属性的单位是px,不过赋值的时候不用带px ,呵呵。
    设置事件来触发加载
    $("img.lazy").lazyload({
    event : "click"
    });
    使用特效
    $("img.lazy").lazyload({
    effect : "fadeIn"
    });

  • 相关阅读:
    内存优化
    OpenThreads库学习
    WPS/office使用技巧系列
    NB-IOT学习
    JSON和XML
    物联网平台学习
    .net提供的5种request-response方法一
    HTML5之IndexedDB使用详解
    jQuery圆形统计图实战开发
    用javascript将数据导入Excel
  • 原文地址:https://www.cnblogs.com/ZaraNet/p/9508016.html
Copyright © 2011-2022 走看看