js图片懒加载

2021-03-19 10:24

阅读：298

标签：list send innerhtml load body reac item set idt

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 += `