javascript实现图片预加载和懒加载

//这里我把图片数量写死了，而且对图片名也有要求必须是阿拉伯数字后缀为jpg
//下面注释还会介绍另一种方法,两者选一个就行，当然也可以把你的方法留在评论区共同学习
function preload() {
  for(var i=1;i<13;i++){
    var img=[];
    img[i]=new Image();//创建一个img对象
    img[i].src="img/"+i+".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());

<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>