js图片懒加载

window.onload = function(){
    var pageNo = 1, //页码
        pageSize = 50, //每一页的条数
        str ="";
    getData(pageNo);
   window.onscroll = function(){
    //1、滚动条与顶部高度
    var scrollTop = window.scrollY;
    //2、可见区域的高度  
    var _h = window.innerHeight;
    //3、页面实际高度  
    var totalH = document.body.scrollHeight;
    if(scrollTop+_h >= totalH){
        getData(pageNo++);
    }
   };
   //选择器封装
   let f = name => document.querySelector(name);
   //获取图片
   function getData(){
       var request = new XMLHttpRequest();
       request.open('get',`http://127.0.0.1:8080/home/page/${pageNo}/${pageSize}`);
       request.send();
       request.onreadystatechange = function(){
           if(request.readyState == 4 && request.status == 200){
               var data = JSON.parse(request.responseText);  //json字符串转为对象
                data.forEach(function(item,i){
                    str += ` <li class="lists">
                                <img src="${item.img_url}" width="150" height="150">            
                            </li>`
                });
                f(".index-main ul").innerHTML = str;
           }
       }
   }
}