如何在背景圖片載入完成之後顯示頁面內容
阿新 • • 發佈:2018-11-16
首先後去後端資料,看看需要載入什麼圖片,共幾個圖片
for (var i = 0; i < that.vClassList.length; i++) { if(that.vClassList[i].msgTypeCode=='18'){ that.imgArray.push("./module/images/online-bg.png"); that.imgArray.push("./module/images/correct.png"); that.imgArray.push("./module/images/study.png"); }else if(that.vClassList[i].msgTypeCode=='20'){ that.imgArray.push("./module/images/gxh-bg.png") that.imgArray.push("./module/images/study.png"); that.imgArray.push("./module/images/unlock.png"); }else if(that.vClassList[i].msgTypeCode=='10'){ that.imgArray.push("./module/images/after-bg.png"); that.imgArray.push("./module/images/play.png"); }else if(that.vClassList[i].msgTypeCode=='23'){ that.imgArray.push("./module/images/picture-bg.png"); }else{ that.imgArray.push("./module/images/oracy-bg.png"); } };
然後根據得到的url,也就是圖片地址,進行載入圖片
isImgLoad:function(callback){ var _this = this; for(var i = 0 ; i < _this.imgArray.length ; i++){ var img = new Image() img.src = _this.imgArray[i] _this.imgArrayLoad.push(img) $(img).on('load',function(){ console.log($(this).attr("src")) // $(this).remove(); _this.flag++ if(_this.flag==_this.imgArray.length){ _this.loading = false; } }) } }
輕鬆搞定!