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里，图片显示出来。
将所有需要按需加载的图片获取到一个集合，滚动滚动条的时候判断哪些图片出现在了可视区域内，出现了就执行一个加载的操作。
加载完成后就将这个图片移出集合或者数组中去，最后数组内需要加载的图片就会越来越少。
*/