电商网站图片滚动懒加载实现

$(function(){
    //第一种方式  第三方插件实现
    // $.ajax({
    //     type:'get',
    //     url:'http://127.0.0.1:3333/home',
    //     dataType:'json',
    //     success:function(res){
    //         console.log(res);
    //         if(res.length>0){
    //             $.each(res,function(index,item){
    //                 $(".index-main ul").append('
  • '+ // ''+ // ' '+ // '
  • ') // }) // }; // //懒加载 // $(".index-main ul img").lazyload({ // effect:'fadeIn' //淡入效果 // }) // }, // error:function(error){ // console.log(error); // } // }); imgList(); //第二种方式 $(window).scroll(function(){ //滚动条与顶部的距离 var scrollTop = Math.ceil($(this).scrollTop()); //当前可视区域的高 var h = $(this).height(); //页面的总高度 var top = $(document).height(); // console.log(scrollTop); if(scrollTop + h >= top) { //滚动条触底 imgList(); } }) }); function imgList() { $.ajax({ type:'get', url:'http://127.0.0.1:3333/home', dataType:'json', success:function(res){ console.log(res); //截图10条 var data = res.slice(0,10); if(data.length>0){ $.each(data,function(index,item){ $(".index-main ul").append('
  • '+ ''+ ' '+ '
  • ') }) }; }, error:function(error){ console.log(error); } }); }

     

    你可能感兴趣的:(jquery)