js学习总结----多张图片的延迟加载实战

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--做移动端响应式必须加的样式-->
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            font-size:14px;
        }
        ul,li{
            list-style:none;
        }
        img{
            display:block;
            border:none;
        }
        /*
            最外层容器不设定宽高的
        */
        .news{
            padding:10px;
        }
        .news li{
            height:60px;
            padding:10px 0;
            border-bottom:1px solid #dedede;
            position:relative;
        }
        .news li > div:nth-child(1){
            position:absolute;
            top:10px;
            left:0;
            width:75px;
            height:60px;
            background:url('img/default.png') no-repeat center center;
            background-size:100% 100%;/*设置背景图片大小*/
        }
        .news li > div:nth-child(1) img{
            width:100%;
            height:100%;
            display:none;
            opacity:0;
        }
        .news li > div:nth-child(2){
            height:60px;
            margin-left:80px;
        }
        .news li > div:nth-child(2) h2{
            height:20px;
            line-height:20px;
            /*实现文字超出隐藏*/
            overflow:hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .news li > div:nth-child(2) p{
            line-height:20px;
            font-size:12px;
            color:#ccc;
        }
    </style>
</head>
<body>
    <ul id='news' class='news'>
        <li>
            <div>
                <img src="" alt="">
            </div>
            <div>
                <h2>我是一个标题</h2>
                <p>我是内容</p>
            </div>
        </li>
    </ul>

    <script>
        var news = document.getElementById('news')
        var imgList = news.getElementsByTagName('img')
        //1、获取需要绑定的数据(Ajax)
        var jsonData = null;
        ~function(){
            var xhr = new XMLHttpRequest();
            //URL地址后面加的随机数是在清除每一次请求数据时候(GET请求)产生的缓存
            xhr.open('GET','data.json?_='+Math.random(),false)
            xhr.onreadystatechange = function(){
                if(xhr.readystate ===4 && /^2\d{2}$/.test(xhr.status)){
                    var val = xhr.responseText;
                    jsonData = utils.formatJSON(val)
                }
            }
            xhr.send(null)
        }()
        //2、数据绑定->把jsonData存储的数据绑定到页面中(字符串拼接)
        ~function(){
            var str = '';
            if(jsonData){
                for(var i = 0,len = jsonData.length;i<len;i++){
                    var curData = jsonData[i]
                    str+='<li>';
                    str+='<div><img src="" trueImg="'+curData['img']+'"></div>';
                    str+='<div>';
                    str+='<h2>'+curData['title']+'</h2>';
                    str+='<p>'+curData['desc']+'</p>';
                    str+='</div>';
                    str+='</li>';
                }
            }
            news.innerHTML = str;
        }()
        //3、图片延迟加载
        //我先编写一个方法实现单张图片的延迟加载
        function lazyImg(curImg){
            var oImg = new Image;
            oImg.src = curImg.getAttribute('trueImg');
            oImg.onload = function(){
                curImg.src = this.src;
                curImg.style.display = "block";
                fadeIn(curImg)
                oImg = null
            };
            curImg.isLoad = true;
        }

        function fadeIn(curImg){
            var duration = 500,interval = 10,target = 1;
            var step = (target/duration)*interval;
            var timer = window.setInterval(function(){
                var curOP = utils.getCss(curImg,'opacity');
                if(curOP>1){
                    curImg.style.opacity = 1;
                    window.clearInterval(timer)
                    return
                }
                curOP+=step;
                curImg.style.opacity = curOP;
            },interval)

        }

        function handleAllImage(){
            for(var i = 0,len = imgList.length;i<len;i++){
                var curImg = imgList[i];
                //当前的图片处理过了就不需要在重新的进行处理了
                if(curImg.isLoad = true){
                    continue;
                }
                //只有A小于B的时候才进行处理,当前图片是隐藏的,我们其实计算的是它父节点的A
                var curImgPar = curImg.parentNode;
                var A = utils.offset(curImgPar).top + curImgPar.offsetHeight;
                var B = utils.win('clientHeight')+utils.win('scrollTop');
                if(A<B){
                    lazyImg(curImg);
                }
            }
        }

        //4、开始的时候一秒加载第一屏的图片,当滚动条滚动的时候,再加载剩余的图片
        window.setTimeout(handleAllImage,1000);
        window.onscroll = handleAllImage;
    </script>
</body>
</html>

 

posted @ 2017-07-07 15:27  diasa  阅读(325)  评论(0编辑  收藏  举报