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>