整页图片的懒加载

// 请求当前页面

 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);

}},

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

原文地址：https://www.cnblogs.com/James123/p/10120717.html