web页面分屏加载

一时失言乱红尘 2023-10-11 16:12 15阅读 0赞

在WEB项目中，影响客户体验度的一个重要元素就是页面响应的速度。在实际工作场景中，存在一部分页面内容需要动态加载，因为页面的元素会受到销量、节日、促销等影响，优化这类型页面加载的方式就是分屏加载页面内容。  
拿京东首页举例，它存在分类树、广告轮播图、用户信息、京东秒杀、排行榜、时尚达人等等模块。如图：

![这里写图片描述][SouthEast]

每个模块都是一个以纵坐标为标尺的DIV。所以在页面加载的时候就可以获取当前页面高度进行分屏动态加载。在设计页面的时候就可以将每个模块的加载作为一个单独的函数，具体实现如下：  
  
**jquery实现方式**

//设置标记，保证一个模块只加载一次
        var flag2 = false;
        var flag3 = false;
         $(window).scroll(function () {
            console.info($(window).scrollTop());//获取滚动条垂直位置
            var windowHight = $(window).scrollTop();
            if(windowHight>80 && flag2!=true){
                ECaiRecomContextNew();//执行动态加载模块二函数
                flag2=true;
            }
            if(windowHight>200 && flag3!=true){
                advertCarousel();//执行动态加载模块三函数
                flag3 = true;
            }
        });

**vue实现方式**

data(){
        return{
            flag2: false,
            flag3: false
        }
    },
    mounted() {
        window.addEventListener("scroll", this.handleScroll, true);
    },
    methods:{
        // 分屏加载数据
        handleScroll() {
          //设置标记，保证一个模块只加载一次
          let top =
            document.documentElement.scrollTop ||
            document.body.scrollTop ||
            window.pageYOffset;
          // console.log(top);
          if (top > 80 && this.flag2 != true) {
            this.$refs.compet2.pageInit();
            this.flag2 = true;
          } else if (top > 300 && this.flag3 != true) {
            this.$refs.compet3.pageInit();
            this.flag3 = true;
          }
        },
    }

[SouthEast]: https://img-blog.csdn.net/20180121154452640?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGVvMTg3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast