1. 程式人生 > >整頁圖片的懶載入

整頁圖片的懶載入

// 請求當前頁面
 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);

}
},


備註:向後臺請求時,首先判斷該張圖片是否處於請求狀態,裡面重複請求某頁資料