延迟加载和预加载实现

作者: 六月太阳花 | 来源:发表于2017-02-06 11:34 被阅读0次

延迟加载和预加载实现
JS
web优化之懒加载和预加载
图片懒加载
懒加载和预加载
js中的预加载与懒加载（延迟加载）
javascript图片懒加载与预加载的分析
JavaScript--预加载与延迟加载
2018-07-17 懒加载和预加载
图片延迟加载3种实现方式

延迟加载：
obj.offsetTop < 可视区高度 + 滚动距离;
obj.offsetTop < document.documentElement.clientHeight +
(document.documentElement.scrollTop || document.body.scrollTop);

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;list-style:none;}
        ul{
            width: 200px;
            border:1px solid #000;
            float:left;
            margin:10px;
        }
        li{
            width: 180px;
            height: 200px;
            background: red;
            margin:10px;
        }
    </style>
    <script>
        function rnd(n,m){return parseInt(Math.random()*(m-n)) + n;}
        window.onload = function(){
            var aUl = document.getElementsByTagName('ul');
            function createLI(){
                var oLi = document.createElement('li');
                oLi.style.height = rnd(100,500) + 'px';
                oLi.style.background = 'rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
                return oLi;
            }
            function createLI20(){
                for(var i = 0; i < 20; i++){
                    var oLi = createLI();
                    var arrUl = [];
                    for(var j = 0; j<aUl.length; j++){
                        arrUl.push(aUl[j]);
                    }
                    arrUl.sort(function(n1,n2){
                        return n1.offsetHeight - n2.offsetHeight;
                    });
                    arrUl[0].appendChild(oLi)
                }
            }
            createLI20();
            window.onscroll = function(){
                var clientH = document.documentElement.clientHeight;
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var clientBottom = clientH + scrollTop;
                //页面内容高度
                var pageHeight = document.documentElement.scrollHeight;
                document.title = pageHeight + ',' + clientBottom;
                if(pageHeight <= clientBottom){
                    // alert(pageHeight + ',' + clientBottom);
                    createLI20();
                } 
            };
        };
    </script>
</head>
<body>
      <ul></ul>
      <ul></ul>
      <ul></ul>
</body>
</html>

预加载-图片：
自己偷偷地加载
Image对象：
//创建一个新的Image对象
var img = new Image();
img.src img....

var img = new Image();
        img.src = 'img/bbb1.jpg'; 
        img.onload = function(){
            alert('加载完成！');
        }; 
        img.onerror = function(){
            alert('失败了！');
        };