JavaScript懒加载实现效果

最新推荐文章于 2021-12-02 23:04:00 发布

_Wz_

最新推荐文章于 2021-12-02 23:04:00 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/qq_45216853/article/details/105595526

版权

懒加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    // var arr=[1,2,3,4];
    // var min=Math.min.apply(null,arr);
    // console.log(min);

    var width;
    var clientWidth;
    var num=3;
    var list=[];
    var heightList=[];
    const COL=5;
    const GAP=10;
    init();
    function init(){
        document.body.style.margin="0px";
        var ul=ce("ul",{
            listStyle:"none",
            margin:"0px",
            padding:"0px"
        });
        // 获取页面的可视宽度赋给变量clientWidth
        clientWidth=document.documentElement.clientWidth;
        // 页面的可视宽度-(4个li的左边距)/5个li，得到每个ul(li)的宽度
        width=(clientWidth-(COL-1)*GAP-1)/COL;
        for(var i=0;i<COL;i++){
            var li=ce("li",{
                float:"left",
                width:width+"px",
                marginLeft:i===0 ? "0px" : GAP+"px"
            });
            // 每个li里面所有内容的高度，初始为0
            heightList.push(0);
            ul.appendChild(li);
            // list数组，存储所有li元素数组
            list.push(li);
        }
        document.body.appendChild(ul);
        loadImage();
        window.addEventListener("resize",resizeHandler);
        // 增加滚动条事件
        document.addEventListener("scroll",scrollHandler);
    }

    function loadImage(){
        var img=new Image();
        img.addEventListener("load",loadHandler);
        img.src=`./img/${num}-.jpg`;
    }

    function loadHandler(e){
        this.removeEventListener("load",loadHandler);
        var scale=this.height/this.width;
        var height=scale*width;
        this.style.width=width+"px";
        this.style.height=height+"px";
        this.scale=scale;
        var min=Math.min.apply(null,heightList);
        var index=heightList.indexOf(min);
        list[index].appendChild(this);
        heightList[index]+=height;
        if(clientWidth!==document.documentElement.clientWidth){
            clientWidth=document.documentElement.clientWidth;
            resizeHandler();
        }
        // num++;
        // if(num>79){
        //     return;
        // }
        // body里面内容的高度
        if(document.body.scrollHeight>document.documentElement.clientHeight*4){
            return;
        }
        num++;
        if(num>79) num=3;
        loadImage();
    }

    function scrollHandler(e){
        if(document.documentElement.scrollHeight-document.documentElement.scrollTop<document.documentElement.clientHeight*2){
            num++;
            if(num>79) num=3;
            loadImage();
        }
    }

    function ce(type,style){
        var elem=document.createElement(type);
        Object.assign(elem.style,style);
        return elem;
    }

    function resizeHandler(e){
        width=(document.documentElement.clientWidth-(COL-1)*GAP-1)/COL;
        for(var i=0;i<list.length;i++){
            list[i].style.width=width+"px";
            for(var j=0;j<list[i].children.length;j++){
                var img=list[i].children[j];
                img.style.width=width+"px";
                img.style.height=width*img.scale+"px";
            }
        }
    }
</script>
</body>
</html>