zoukankan      html  css  js  c++  java
  • lazyload 初学

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>lazyLoad</title>
    <script src="//cdn.bootcss.com/jquery/2.1.0-beta2/jquery.min.js"></script>
    <script src="lazyLoad.min.js"></script>
    </head>
    <body>
    <img src="img/grey.gif" alt="" id="bmw_img" class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574">
    <a href="javascript:;" onclick="lazyload()" style="display: block;">加载图片</a>
    <script>
    var imgEle = document.getElementById('bmw_img');/声明变量imgEle获得bmw_img的标签/
    function lazyload(){/触发点击事件/
    var original = imgEle.getAttribute('data-original');/声明变量original为imgEle获取data-original的属性/
    oImg = document.createElement('img');/oImg创造一个img标签/
    oImg.src=original;/oImg的地址为original/
    oImg.onload = function(){/先隐藏再出现/
    imgEle.src = original;
    }
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    python之道04
    python之list [ 列表 ]
    end和sep的使用方法
    pass1
    python之for (循环)
    python之range (范围)
    python之str (字符型)
    python之bool (布尔值)
    python之int (整型)
    python之道03
  • 原文地址:https://www.cnblogs.com/jiangtao1995/p/5307419.html
Copyright © 2011-2022 走看看