JS懒加载

<script>
    var container=document.createElement('div');
    var frag=document.createDocumentFragment();

    for(var i=1 ;i<13;i++){
        var imgUrl='images/'+i+'.jpg';
        var img=document.createElement('img');
        img.setAttribute('data-index',imgUrl);
        img.setAttribute('src','images/loading.gif');
        img.setAttribute('style','width:600px;height:350px;margin: 5px;');
        frag.appendChild(img);
        // console.log(img)
    }
    container.appendChild(frag);
    document.body.insertBefore(container,document.body.firstElementChild)
    //——————————————————————————————————————————以上动态生成占位图片——
    window.addEventListener('scroll',lazyLoaded);
    function lazyLoaded(){
        //滚动条高度
        var scrollTop= document.documentElement.scrollTop;
        //可视区高度
        var clientHeight=document.documentElement.clientHeight;

        var imgArr=Array.prototype.slice.call(document.images);
        imgArr.forEach(function(ev){
           console.log('滚动条高度:'+scrollTop+' 可视区高度:'+clientHeight);

          if(ev.offsetTop<=(scrollTop+clientHeight)){
              ev.src=ev.dataset.index;
          }
       })


    }

    window.addEventListener('load',lazyLoaded);

</script>