原生JS判斷頁面中圖片載入完成
阿新 • • 發佈：2018-12-26
自己寫的判斷頁面中圖片載入完成的方法，用原生JS完成，不用jq主要考慮在不載入jq的情況下，程式碼可以正常執行
判斷指定ID的盒子中所有圖片載入，demo程式碼如下：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>頁面圖片載入完成測試</title> </head> <body> <div id="loadingBox" style="display:none;"> <img src="public/img/1.png" /> <img src="public/img/2.png" /> <img src="public/img/3.png" /> <img src="public/img/4.png" /> <img src="public/img/5.png" /> </div> <script type="text/javascript"> //'loadingBox' => 存放 指定要載入的圖片 的上級盒子 ID getImgLoadEd('loadingBox',function(){ alert('所有載入完成'); }); //判斷 指定要載入的圖片 是否載入完成 function getImgLoadEd(loadingBox,callback){ //存放 指定要載入的圖片 的盒子 var imgAll = document.getElementById(loadingBox); //指定要載入的圖片 的數量 var imgL = imgAll.children.length; //指定要載入的圖片 起始 key var imgStart = 0; //單張 指定要載入的圖片 是否載入完成（如果沒有，則定時器不斷執行的方法IfLoadImg時，會在方法中有判斷此變數布林值，並提前中止不再住下做多餘的執行 ， 直到此圖片載入完成後才會往下執行，要載入圖片的KEY才會+1） var isLoad = false; //定時器執行的 載入圖片 方法 function IfLoadImg(){ //所有圖片載入完畢 if(imgStart >= imgL){ console.log('圖片載入完成，圖片總數量：' + imgStart); clearInterval(loadTimer); if(callback){ callback(); } return; } console.log('上張圖片是否載入完成：' + isLoad); console.log('當前載入圖片KEY：' + imgStart); //單張 指定要載入的圖片 未載入完成時，不再往下執行 if(!isLoad && imgStart != 0){ return; //單張 指定要載入的圖片 載入完成後，繼續往下執行 1 次 }else{ isLoad = false } //根據 指定要載入的圖片 的KEY 載入圖片的方法 loadImg(imgStart); function loadImg(imgKey){ var curImg = imgAll.children[imgKey].src; var loadImg = new Image(); loadImg.src = curImg; loadImg.onload = function(){ //單張 指定要載入的圖片 載入完成後，設定KEY + 1，並設定是否載入成功的變數為true isLoad = true; imgStart++; } } } //定時器執行 指定要載入的 單張 圖片 方法 var loadTimer = setInterval(IfLoadImg,10); } </script> </body> </html>
給出要判斷載入圖片URL陣列，根據每個URL載入圖片，JS程式碼如下：
getImgLoadEd(function(){ alert('所有載入完成'); }); function getImgLoadEd(callback){ var imgAll = [ 'public/image/bg1.jpg', 'public/image/bg2.jpg', 'public/image/bg3.jpg', 'public/image/bg4.jpg', 'public/image/bg5.jpg', 'public/image/bg6.jpg', 'public/image/bg7.jpg', 'public/image/bg8.jpg', 'public/image/bg9.jpg', 'public/image/bg10.jpg', ]; var imgL = imgAll.length; var imgStart = 0; var isLoad = false; var bfb = 0; function IfLoadImg(){ if(imgStart >= imgL){ console.log('圖片載入完成，圖片總數量：' + imgStart); clearInterval(loadTimer); if(callback){ callback(); } return; } //console.log('上張圖片是否載入完成：' + isLoad); //console.log('當前載入圖片KEY：' + imgStart); if(!isLoad && imgStart != 0){ return; }else{ isLoad = false } loadImg(imgStart); function loadImg(imgKey){ var curImg = imgAll[imgKey]; var loadImg = new Image(); loadImg.src = curImg; loadImg.onload = function(){ isLoad = true; imgStart++; bfb = parseInt(imgStart / imgL * 100); console.log(bfb + '%'); $('.page1_text').html(bfb + '%'); } } } var loadTimer = setInterval(IfLoadImg,10); }