整页图片的懒加载

Posted 2021-01-27 james123

// 请求当前页面

 ImgLazyLoad({ state, commit },pageNo) {  
        if(state.pageArr[pageNo-1].flag !== UNLOAD){  // 若已加载，则请求终止
             return false;
        }
        state.pageArr[pageNo-1].flag = LOADING;
        pdfApi.ImgLazyLoad({
            "hfsFileCode": window.InitData.HfsFileCode,
            "pageIndex": pageNo,
            "dbcode": window.InitData.dbCode,
            "dbname": window.InitData.dbName,
            "filename": window.InitData.fileName,
            "tasktype": window.InitData.tasktype
        }).then((data) => {
            state.pageArr[pageNo-1].flag = LOADED;
            var data = eval(data).chapter;

            if(pageNo==1){
               state.curWidth = $("#read_midbox").width();
               state.curScale = data.pageWidth/state.curWidth;
               state.curHeight = data.pageHeight / state.curScale;
               state.curBoxStyle.height = state.curHeight + ‘px‘;
               console.log("scale:"+state.curScale);
               state.curOverStyle.height = (state.curHeight+12) * window.InitData.pageCount + "px";
            }
            var resInfo = {};
            resInfo.imgSrc = data.imageName,
            resInfo.zuoBiao = data.zuoBiao;
            resInfo.lines = data.lines;
            resInfo.pageNo =data.pageIndex;
            commit(‘setPageArr‘, resInfo);
            commit(‘setPos‘, resInfo);
            commit(‘setLines‘, resInfo);
        }).catch((err) => {
            // 提示信息
        }).finally(() => {
            state.loading = false;
        });
    },

// 滚动时加载上下页

    loadScrollPage(store,pageNo){ 
        for (var i = Number(pageNo) - 1; i <= Number(pageNo) + 1; i++) {
            if (i > 0 && i <= window.InitData.pageCount) {
                store.dispatch("ImgLazyLoad",i);
            }
        }
    },

//加载指定页的上下页（若已加载则忽略）

    LoadPreNext(store,pageNo) {  
        var scrollDis = $("#load-box"+pageNo)[0].offsetTop;
        store.state.initPageNo = pageNo;
        store.dispatch("loadScrollPage",store.state.initPageNo);
        $("#read_mid_srollbar").scrollTop(scrollDis);
    },

// 滚动加载

    pageScroll(store){ 
        var scrollDis = $("#read_mid_srollbar").scrollTop();
        var windowHeight = $("#read_mid_srollbar").height();  //窗口高度
        var curPage = Math.ceil((scrollDis + windowHeight) / store.state.curHeight);
        store.state.initPageNo = curPage;
        store.dispatch("loadScrollPage",store.state.initPageNo);
        store.dispatch("PageToZTreeNode",store.state.initPageNo);

    }
},


备注：向后台请求时，首先判断该张图片是否处于请求状态，里面重复请求某页数据