码迷,mamicode.com
首页 > Web开发 > 详细

js图片懒加载

时间:2021-03-18 14:07:57      阅读:0      评论:0      收藏:0      [点我收藏+]

标签: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 += ` <li class="lists">
                                <img src="${item.img_url}" width="150" height="150">            
                            </li>`
                });
                f(".index-main ul").innerHTML = str;
           }
       }
   }
}

 

js图片懒加载

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

原文地址:https://www.cnblogs.com/houBlogs/p/14548938.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!