懒加载

来源：互联网发布：在线vip视频解析源码编辑：程序博客网时间：2024/05/17 08:38

懒加载 html部分

<div class="container">        <div class="box">            <img src="" alt="" ascr="img/1.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/2.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/3.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/4.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/5.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/6.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/7.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/8.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/9.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/10.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/11.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/12.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/13.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/14.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/15.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/16.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/17.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/18.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/19.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/20.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/21.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/22.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/23.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/24.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/25.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/26.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/27.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/28.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/29.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/30.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/31.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/32.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/33.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/34.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/35.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/36.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/37.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/38.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/39.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/40.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/41.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/42.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/43.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/44.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/45.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/46.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/47.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/48.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/49.jpg">        </div>        <div class="box">            <img src="" alt="" ascr="img/50.jpg">        </div>

</div>

//css部分

.container{            width: 1200px;            margin: 0 auto;            text-align: justify;        }        .box{            display: inline-block;            vertical-align: top;            box-sizing: border-box;            /* padding: 10px 5px; */            text-align: center;            overflow: hidden;            /* float: left; */            margin:30px 0;            width: 350px;            height: 350px;            border: 1px solid rgb(114, 114, 114);        }        .box img{            width: 100%;            min-height: 1px;        }

//js

var images = document.querySelectorAll('img');function transImageSource() {    images.forEach(function (item) {        var top = item.getBoundingClientRect().top;        if (top < window.innerHeight) {            console.log(item);            item.src = item.getAttribute('ascr');        }    })}var throote = function (fn, time) {    var _startTime = Date.now();    return function () {        var _endTime = Date.now();        if (_endTime - _startTime < time) {            return;        }        fn.apply(null, arguments);        _startTime = _endTime;    }}document.addEventListener('DOMContentLoaded', function () {    transImageSource();    console.log('jfkasdljflk')    window.addEventListener('scroll', throote(function () {        transImageSource()    }, 500))})

阅读全文

0 0