预加载、延迟加载、瀑布流、拖拽

作者: 前端_凯伦 | 来源:发表于2016-12-03 20:49 被阅读0次

预加载、延迟加载、瀑布流、拖拽
JS
图片懒加载
懒加载和预加载
web优化之懒加载和预加载
图片预加载、瀑布流+图片预加载
javascript图片懒加载与预加载的分析
JavaScript--预加载与延迟加载
2018-07-17 懒加载和预加载
图片延迟加载3种实现方式

1.预加载-图片：

自己偷偷地加载
预加载的原理
     var img =  new Image()
     img.src = '';
     //页面上放很多img，设置成隐藏

     img.onload=function(){
        //加载完成了
     };
     img.onerror = funciton(){
        //加载出错了
     }

例子：
    <style>
        #div1{
            width:800px;
            height: 50px;
            background: #ccc;
            position: relative;

        }
        #div2{
            width: 1px;
            height: 100%;
            background: red;
            position: absolute;
            left: 0;
            top:0;
        }
    </style>
    <script>
        window.onload = function(){
            var oDiv1 = document.getElementById('div1');
            var oDiv2 = document.getElementById('div2');

            var count = 1;
            for(var  i = 0; i < 77; i++){

                var img = new Image();
                //img.src = 'images/'+i+'.jpg';
                img.src = 'http://www.zhinengshe.com/works/3525/img/'+i+'.jpg';

                img.onload = function(){
                    count++;
                    var scale = count / 77;
                    oDiv2.style.width = oDiv1.offsetWidth * scale + 'px';

                };

                if(count == 77){
                    //alert('加载完了！');
                }
            }};



    </script>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
</div>
</body>

2.延迟加载

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

例子：
    <style>
        *{margin:0;padding:0;list-style:none;}
        li{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            float: left;
            margin:10px;
        }
        img{
            width: 100%;
            height:100%;

        }
    </style>
    <script>
        window.onresize =  window.onscroll =  window.onload = function(){
            var aImg = document.getElementsByTagName('img');

            for(var i = 0; i < aImg.length; i++){
                //可视区高度
                var clientHeight = document.documentElement.clientHeight;
                //滚动距离
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

                if(aImg[i].offsetTop < (clientHeight+scrollTop)){
                    //加载aImg[i]
                    //console.log(aImg[i].getAttribute('_src'));
                    aImg[i].src = aImg[i].getAttribute('_src');
                }
            }



        };
    </script>
</head>
<body>
<ul>
    <li><img _src="img/b1.jpg"  alt=""></li>
    <li><img _src="img/b2.jpg" alt=""></li>
    <li><img _src="img/b3.jpg" alt=""></li>
    <li><img _src="img/b4.jpg" alt=""></li>
    <li><img _src="img/b5.jpg" alt=""></li>
    <li><img _src="img/b6.jpg" alt=""></li>
    <li><img _src="img/b7.jpg" alt=""></li>
    <li><img _src="img/b8.jpg" alt=""></li>
    <li><img _src="img/b9.jpg" alt=""></li>
    <li><img _src="img/b10.jpg" alt=""></li>
</ul>

</body>

3.瀑布流

瀑布流：

物体大小：

    高度：
        obj.offsetHeight
        obj.scrollHeight
            当内容高度大于盒模型高度时-->内容高度
            当内容高度小于盒模型高度时-->盒模型高度

瀑布流求ul最短
    var arr = [];
    arr.push(1,3,9,2,100);
    arr.push(div1,div2,div3..);
    arr.push(小明,班长);

    arr.sort(function(){
        //默认只会比字符串  字典序
        //想比数字，还是按字典序  n1,n2-->  n1-n2
        
    });
    arr.sort(function(n1,n2){
        return n1-n2;
    });
    arr.sort(function(人1，人2){
        return 人1.身高-人2.身高;
    });

    arrUl = [ul1,ul2,ul3];
    arrUL.sort(function(ULa,ULb){
        return ULa.offsetHeight -  ULb.offsetHeight;
    });

例子：
    <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)
                }
            }

            //如果走到最后了，再弄20个li，加到页面上
            createLI20();
            //当整个页面的高度 >  可视区+滚动距离
            //alert(document.documentElement.scrollHeight);

            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>

4.拖拽

拖拽：
    大象放冰箱：
        1）打开冰箱门
        2）把大象放进去
        3）把门关上
    拖拽：
        1）鼠标按下
        2）鼠标移动
        3）鼠标松开
    新事件：
        按下：  onmousedown
        移动：  onmousemove
        松开：  onmouseup

阻止默认行为：
    return false;
        兼容：chrome  ff  ie9+
    针对低级浏览器：
        事件捕获
            obj.setCapture();

磁性吸附例子：

   <style>
        *{margin:0; padding:0;}
        #div1{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left:200px;
            top:200px;
        }
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            oDiv.onmousedown = function(ev){
                var oEvent = ev || event;
                var disX = oEvent.clientX - oDiv.offsetLeft;
                var disY =　oEvent.clientY - oDiv.offsetTop;
                document.onmousemove = function(ev){
                    var oEvent = ev || event;
                    var l = oEvent.clientX - disX;
                    var t = oEvent.clientY  - disY;

                    if(l <= 100){
                        l = 0;
                    }
                    if (l >= (document.documentElement.clientWidth - oDiv.offsetWidth-100)){
                        l = document.documentElement.clientWidth - oDiv.offsetWidth;
                    }
                    if(t <= 100){
                        t = 0;
                    }
                    if(t >= (document.documentElement.clientHeight - oDiv.offsetHeight-100)){
                        t = document.documentElement.clientHeight - oDiv.offsetHeight;
                    }


                    oDiv.style.left = l + 'px';
                    oDiv.style.top = t + 'px';
                };
                document.onmouseup = function(){
                    document.onmousemove = null;
                    document.onmouseup = null;
                    oDiv.releaseCapture && oDiv.releaseCapture();
                };
                oDiv.setCapture && oDiv.setCapture();
                return false;

            };
        };
    </script>
</head>
<body>
<div id="div1"></div>
</body>

虚线框拖拽

    <style>
        *{margin:0; padding:0;}
        #div1{
            width: 100px;
            height: 100px;
            background: yellow;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById('div1');

            var border = 3;
            oDiv.onmousedown = function(ev){
                var oEvent = ev || event;

                //创建一个虚线框 div 有边框
                var newDiv = document.createElement('div');
                newDiv.style.width = oDiv.offsetWidth - border*2 + 'px';
                newDiv.style.height = oDiv.offsetHeight - border*2 + 'px';
                newDiv.style.position = 'absolute';
                newDiv.style.left = oDiv.offsetLeft + 'px';
                newDiv.style.top = oDiv.offsetTop + 'px';
                newDiv.style.border = border + 'px dashed red';

                document.body.appendChild(newDiv);

                var disX = oEvent.clientX - oDiv.offsetLeft;
                var disY =　oEvent.clientY - oDiv.offsetTop;
                document.onmousemove = function(ev){
                    var oEvent = ev || event;
                    var l = oEvent.clientX - disX;
                    var t = oEvent.clientY  - disY;

                    if(l <= 0){
                        l = 0;
                    }
                    if (l >= (document.documentElement.clientWidth - oDiv.offsetWidth)){
                        l = document.documentElement.clientWidth - oDiv.offsetWidth;
                    }
                    if(t <= 0){
                        t = 0;
                    }
                    if(t >= (document.documentElement.clientHeight - oDiv.offsetHeight)){
                        t = document.documentElement.clientHeight - oDiv.offsetHeight;
                    }


                    newDiv.style.left = l + 'px';
                    newDiv.style.top = t + 'px';
                };
                document.onmouseup = function(){
                    oDiv.style.left = newDiv.offsetLeft + 'px';
                    oDiv.style.top = newDiv.offsetTop + 'px';
                    document.body.removeChild(newDiv);


                    document.onmousemove = null;
                    document.onmouseup = null;
                    oDiv.releaseCapture && oDiv.releaseCapture();
                };
                oDiv.setCapture && oDiv.setCapture();
                return false;

            };
        };
    </script>
</head>
<body>
<div id="div1"></div>
</body>

预加载、延迟加载、瀑布流、拖拽
1.预加载-图片： 2.延迟加载 3.瀑布流瀑布流：物体大小： 4.拖拽磁性吸附例子：虚线框拖拽
JS
JS 懒加载，预加载概念：懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加...
图片懒加载
懒加载与预加载的基本概念。懒加载也叫延迟加载：JS图片延迟加载延迟加载图片或符合某些条件时才加载某些图片。预...
懒加载和预加载
1)概念：懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加载：提前加载图片...
web优化之懒加载和预加载
懒加载和预加载是常用的web优化的手段。所以我们首先应该明白什么是懒加载和预加载。懒加载：懒加载也加延迟加载，延迟...
图片预加载、瀑布流+图片预加载
图片预加载图片预加载是为了解决网络卡等一些其他情况造成该显示的图片不能及时的显示，但为了提高网页的完整性，给未能...
javascript图片懒加载与预加载的分析
懒加载与预加载的基本概念。懒加载也叫延迟加载：前一篇文章有介绍：JS图片延迟加载延迟加载图片或符合某些条件时才...
JavaScript--预加载与延迟加载
JavaScript--预加载与延迟加载 1. 预加载：就是页面打开，图片什么的都加载好了（优先显示图片） 2. ...
2018-07-17 懒加载和预加载
懒加载也就是延迟加载。懒加载的核心的思想是延迟加载,需使用到的时候才进行加载,不使用的时候是不会加载的预加载提前...
图片延迟加载3种实现方式
定义：延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。这与图像预加载相...