zoukankan      html  css  js  c++  java
  • Javascript 图片延迟加载之理论基础

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
            #div1 {
                height: 200px;
                background-color: #bbbbbb;
                font-size: 100px;
            }
        </style>
    </head>
    <body style="height:3500px">
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br /><br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br /><br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <div id="div1">
            我是div1
        </div>
        <script type="text/javascript">
            var ele = document.getElementById('div1');
            //ele.offsetTop;
            //ele.offsetLeft;
            //ele.offsetHeight;
            //ele.offsetParent;
            function offset(ele) {
                var t = ele.offsetTop;
                var l = ele.offsetLeft;
                var p = ele.offsetParent;
                while (p) {
                    if (window.navigator.userAgent.indexOf('MSIE 8') > -1) {
                        l += p.offsetLeft;
                        t += p.offsetTop;
                    } else {
                        l += p.offsetLeft + p.clientLeft;
                        t += p.offsetTop + p.clientTop;;
                    }
                    p = p.offsetParent;
                }
                return { left: l, top: t };
            }
            var h = offset(ele).top + ele.offsetHeight;//这是这个元素底边距文档顶部的绝对偏移量
            window.onscroll = function () {
                var winBottom = (document.documentElement.scrollTop || document.body.scrollTop) + (document.documentElement.clientHeight || document.body.clientHeight);
                if (h<winBottom) {
                    ele.innerHTML = "哈哈,我来也";
                }
            }
            //var h = ht(ele).top + ele.offsetHeight;
            //window.onscroll = function () {
    
            //}
        </script>
    </body>>
    </html>
    

      

  • 相关阅读:
    swiper 增加一个鼠标移入分页器的小点后就切换展示图片
    css中的单冒号和双冒号 以及 伪类和伪元素
    pointer-events: none;元素永远不会成为鼠标事件的target
    jQuery off() 方法
    jQuery方法汇总
    vue 数组修改 页面无法刷新
    mysql error Code 1441:datetime function: datetime field overflow
    生命的意义
    删除镜像或容器
    nginx Redis 不能访问问题
  • 原文地址:https://www.cnblogs.com/alphafly/p/4688408.html
Copyright © 2011-2022 走看看