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>

  • 相关阅读:
    github添加ssh
    包围盒的计算以及物体移动到世界坐标中心
    123
    mysql
    建站步骤
    深度遍历和广度遍历
    Js特殊字符转义之htmlEscape()方法
    参数命名风格转换
    http 206
    js 实现快速排序
  • 原文地址:https://www.cnblogs.com/jiangtao1995/p/5307419.html
Copyright © 2011-2022 走看看