//這里我把圖片數(shù)量寫死了，而且對圖片名也有要求必須是阿拉伯?dāng)?shù)字后綴為jpg
//下面注釋還會(huì)介紹另一種方法,兩者選一個(gè)就行，當(dāng)然也可以把你的方法留在評論區(qū)共同學(xué)習(xí)
function preload() {
  for(var i=1;i<13;i++){
    var img=[];
    img[i]=new Image();//創(chuàng)建一個(gè)img對象
    img[i].src="img/"+i+".jpg"
  }
}
/*function preload() {
    img1=new Image();//創(chuàng)建一個(gè)img對象
    img1.src="xxx/xxx/xxx.jpg"http://圖片地址
    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"
    ......
  }
}*/

// 定義了一個(gè)函數(shù)，帶一個(gè)參數(shù)fun
function addLoadEvent(fun) {
  // 把已經(jīng)加載完成的函數(shù)賦值給oldnload變量
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = fun;
  } else {
    window.onload = function() {
      // 這里執(zhí)行了剛才賦值變量的函數(shù)
      oldonload();
      // 這里是執(zhí)行了傳進(jìn)來的func參數(shù)
      fun();
    }
  }
}
addLoadEvent(preload());
/*
 oldonload是自己定義的變量，并給他賦值了onload事件，onload 事件會(huì)在頁面或圖像加載完成后立即發(fā)生。
 onload是在頁面和圖像加載后執(zhí)行的事件，但在實(shí)際使用中若多次給onload賦值，則onload會(huì)被后復(fù)制的方法給覆蓋，也就意味著onload只會(huì)執(zhí)行最后賦值的方法。
 fun()是傳入的參數(shù)，此處fun()就是preload()。
這段代碼表達(dá)的含義就是：
  如果(typeof window.onload != 'function')也就是說window.onload還沒有被賦值，就直接把它賦值為fun。
  否則，說明有程序先對其賦值了，那么在頁面加載完成之后，應(yīng)該先執(zhí)行現(xiàn)有函數(shù)再執(zhí)行自己的新的fun。
  即，此段代碼保證了onload中原有加載的方法執(zhí)行（且先執(zhí)行），防止fun方法執(zhí)行（圖片預(yù)加載）時(shí)將其覆蓋。
*/

/*
先將照片路徑存放在一個(gè)自定義屬性中，src中存放一個(gè)正在加載的gif，等圖片到了顯示區(qū)域時(shí)再用js將自定義屬性替換到src里，圖片顯示出來。
將所有需要按需加載的圖片獲取到一個(gè)集合，滾動(dòng)滾動(dòng)條的時(shí)候判斷哪些圖片出現(xiàn)在了可視區(qū)域內(nèi)，出現(xiàn)了就執(zhí)行一個(gè)加載的操作。
加載完成后就將這個(gè)圖片移出集合或者數(shù)組中去，最后數(shù)組內(nèi)需要加載的圖片就會(huì)越來越少。
*/
<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');
//獲取的是類數(shù)組對象，只有item（）方法和length屬性沒有數(shù)組對象的方法
var imgArr=Array.prototype.slice.call(lazylode);
//將類數(shù)組轉(zhuǎn)化為數(shù)組
lazylodeImg();
//要執(zhí)行的懶加載方法，一開始應(yīng)該先執(zhí)行一次懶加載，讓顯示區(qū)域內(nèi)的圖片加載出來
var timer;
window.addEventListener('scroll',function(){
  clearTimeout(timer);//節(jié)流
  timer=setTimeout(function(){
    lazylodeImg();//屏幕滾動(dòng)執(zhí)行懶加載
  },100);
},false)
function lazylodeImg(){
  for(var i=0;i<imgArr.length;i++){
    if(isVisibleArea(imgArr[i])){//判斷是否在可視區(qū)域內(nèi)
      imgArr[i].src=imgArr[i].getAttribute('data-src');
      //修改src為自定義的屬性
      imgArr.splice(i,1);//將數(shù)組中已加載的圖片移除數(shù)組
      i--;
      //因?yàn)閺臄?shù)組中刪除了下標(biāo)為1的數(shù)，那么原來下標(biāo)為2的數(shù)就進(jìn)位為1了
    }
  }
}
function isVisibleArea(el){
  var rect=el.getBoundingClientRect();
  //獲取元素距離可視區(qū)域的top，left等值
  return rect.bottom>0 && rect.top<window.innerHeight && rect.right>0 && rect.left<window.innerHeight;
  //都為真才會(huì)返回true
}
</script>