前后端交互图片懒加载

短命女 2022-09-16 11:27 214阅读 0赞

index.js文件代码如下

$(function(){
        var num =1;
        imgList(num)
        var flag = true
    
        //滚动条触底后，再次请求数据
        $(window).scroll(function(){
            // 获取当前视口的高度
            var _h = $(this).height()
            //获取当前页面的高度
            var h = $(document).height()
            //获取滚动条距离顶部的高度
            var scrollTop = Math.ceil($(this).scrollTop())
    
            if(scrollTop + _h >= h){
                if(flag){  //设置flag，防止出现滚动条触底后，即使没有数据了，也一直请求的问题
                    num++;
                    imgList(num)           
                }
            }
        })
    })
    
    function imgList(size){
        $.ajax({
            type:'get',
            url:`http://127.0.0.0:2000/home?page=${size}`,
            dataType:'json',
            success:function(res){
                if(res.status == 200){
                    var data = res.data;
                    if(data.length > 0){
                        $.each(data,function(index,item){
                            var str = `<li class="lists">
                            <img src=${item.imgUrl} width="150" height="150">
                            <label>
                            <b class="discount">${item.newPrice}</b>
                            <span class="price-text">${item.oldPrice}</span>
                            </label></li>`
                            $('.index-main ul').append(str)
                        })
                    }
                }else{
                    flag = true;
                    $('no-data').show();
                }
            }
        })
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，214人围观）

还没有评论，来说两句吧...

相关阅读

相关图片懒加载

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmds

青旅半醒/ 2022年11月16日 13:41/ 0 赞/ 305 阅读

相关图片懒加载

function lazyLoadImg() { var img = document.getElementsByTagName('img'); s

谁践踏了优雅/ 2022年09月28日 13:05/ 0 赞/ 367 阅读

相关前后端交互图片懒加载

index.js文件代码如下 $(function(){ var num =1; imgList(num) var f

短命女/ 2022年09月16日 11:27/ 0 赞/ 215 阅读

相关图片懒加载

在一个项目中，如果同时加载的图片太多的话，会导致页面卡顿，这个时候就会用到懒加载。懒加载的实现原理是监听浏览器的滚动条事件，先加载出前面几张图片，然后当滚动条滚动的时候再依次加

分手后的思念是犯贱/ 2022年06月17日 13:49/ 0 赞/ 142 阅读

相关图片懒加载

1.引入js jquery.lazyload.js(如下) / Lazy Load - jQuery plugin for lazy loading

缺乏、安全感/ 2022年06月16日 06:44/ 0 赞/ 465 阅读

相关图片懒加载

懒加载的意义[（在线demo预览）][demo] 尽管很多公司的网页都有一些限制，比如页面的最大的图片大小不得大于50k,也有很多图片优化工具fis3、gulp等等，但是

痛定思痛。/ 2022年06月04日 07:58/ 0 赞/ 508 阅读

相关图片懒加载

在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，

偏执的太偏执、/ 2022年05月28日 02:07/ 0 赞/ 536 阅读

相关图片懒加载

<!--<me

亦凉/ 2022年05月23日 12:19/ 0 赞/ 467 阅读

相关图片懒加载

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

r囧r小猫/ 2022年05月21日 06:54/ 0 赞/ 504 阅读

相关图片懒加载

\[外链图片转存失败(img-vbwUXXxJ-1563574134995)([https://upload-images.jianshu.io/upload\_images/

川长思鸟来/ 2021年09月30日 00:24/ 0 赞/ 819 阅读