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>

  

原文地址:https://www.cnblogs.com/alphafly/p/4688408.html