javascript實現圖片預載入和懶載入

//這裡我把圖片數量寫死了，而且對圖片名也有要求必須是阿拉伯數位字尾為jpg
//下面註釋還會介紹另一種方法,兩者選一個就行，當然也可以把你的方法留在評論區共同學習
function preload() {
  for(var i=1;i<13;i++){
    var img=[];
    img[i]=new Image();//建立一個img物件
    img[i].src="img/"+i+".jpg"
  }
}
/*function preload() {
    img1=new Image();//建立一個img物件
    img1.src="xxx/xxx/xxx.jpg"//圖片地址
    img2=new Image();
    img2.src="xxx/xxx/xxx.jpg"
    img3=new Image();
    img3.src="xxx/xxx/xxx.jpg"
    img4=new Image();
    img4.src="xxx/xxx/xxx.jpg"
    ......
  }
}*/

// 定義了一個函數，帶一個引數fun
function addLoadEvent(fun) {
  // 把已經載入完成的函數賦值給oldnload變數
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = fun;
  } else {
    window.onload = function() {
      // 這裡執行了剛才賦值變數的函數
      oldonload();
      // 這裡是執行了傳進來的func引數
      fun();
    }
  }
}
addLoadEvent(preload());
/*
 oldonload是自己定義的變數，並給他賦值了onload事件，onload 事件會在頁面或影象載入完成後立即發生。
 onload是在頁面和影象載入後執行的事件，但在實際使用中若多次給onload賦值，則onload會被後複製的方法給覆蓋，也就意味著onload只會執行最後賦值的方法。
 fun()是傳入的引數，此處fun()就是preload()。
這段程式碼錶達的含義就是：
  如果(typeof window.onload != 'function')也就是說window.onload還沒有被賦值，就直接把它賦值為fun。
  否則，說明有程式先對其賦值了，那麼在頁面載入完成之後，應該先執行現有函數再執行自己的新的fun。
  即，此段程式碼保證了onload中原有載入的方法執行（且先執行），防止fun方法執行（圖片預載入）時將其覆蓋。
*/

/*
先將照片路徑存放在一個自定義屬性中，src中存放一個正在載入的gif，等圖片到了顯示區域時再用js將自定義屬性替換到src裡，圖片顯示出來。
將所有需要按需載入的圖片獲取到一個集合，捲動卷軸的時候判斷哪些圖片出現在了可視區域內，出現了就執行一個載入的操作。
載入完成後就將這個圖片移出集合或者陣列中去，最後陣列內需要載入的圖片就會越來越少。
*/
<div>
  <img src="img/lode.img" data-src="img/1.img" class="lazylode">
  <img src="img/lode.img" data-src="img/2.img" class="lazylode">
  <img src="img/lode.img" data-src="img/3.img" class="lazylode">
  <img src="img/lode.img" data-src="img/4.img" class="lazylode">
  <img src="img/lode.img" data-src="img/5.img" class="lazylode">
  <img src="img/lode.img" data-src="img/6.img" class="lazylode">
  <img src="img/lode.img" data-src="img/7.img" class="lazylode">
  <img src="img/lode.img" data-src="img/8.img" class="lazylode">
</div>
<script>
 var lazylode=document.querySelectorAll('.lazylode');
//獲取的是類陣列物件，只有item（）方法和length屬性沒有陣列物件的方法
var imgArr=Array.prototype.slice.call(lazylode);
//將類陣列轉化為陣列
lazylodeImg();
//要執行的懶載入方法，一開始應該先執行一次懶載入，讓顯示區域內的圖片載入出來
var timer;
window.addEventListener('scroll',function(){
  clearTimeout(timer);//節流
  timer=setTimeout(function(){
    lazylodeImg();//螢幕捲動執行懶載入
  },100);
},false)
function lazylodeImg(){
  for(var i=0;i<imgArr.length;i++){
    if(isVisibleArea(imgArr[i])){//判斷是否在可視區域內
      imgArr[i].src=imgArr[i].getAttribute('data-src');
      //修改src為自定義的屬性
      imgArr.splice(i,1);//將陣列中已載入的圖片移除陣列
      i--;
      //因為從陣列中刪除了下標為1的數，那麼原來下標為2的數就進位為1了
    }
  }
}
function isVisibleArea(el){
  var rect=el.getBoundingClientRect();
  //獲取元素距離可視區域的top，left等值
  return rect.bottom>0 && rect.top<window.innerHeight && rect.right>0 && rect.left<window.innerHeight;
  //都為真才會返回true
}
</script>