JavaScript to implement image preloading and lazy loading

//Here I have written the number of pictures, and the picture name must be Arabic numerals with the suffix jpg
//The following comment will introduce another method, just choose one of them, of course, you can also leave your method in the comment area to learn together function preload() {
  for(var i=1;i<13;i++){
    var img=[];
    img[i]=new Image(); //Create an img object img[i].src="img/"+i+".jpg"
  }
}
/*function preload() {
    img1=new Image(); //Create an img object img1.src="xxx/xxx/xxx.jpg" //Picture address 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"
    ......
  }
}*/

// Defines a function with a parameter fun
function addLoadEvent(fun) {
  // Assign the loaded function to the oldnload variable var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = fun;
  } else {
    window.onload = function() {
      //The function oldonload() that just assigned the variable is executed here;
      // Here the passed func parameter fun() is executed;
    }
  }
}
addLoadEvent(preload());
/*
 oldonload is a self-defined variable, and it is assigned the onload event. The onload event will occur immediately after the page or image is loaded.
 onload is an event that is executed after the page and image are loaded. However, in actual use, if onload is assigned multiple times, onload will be overwritten by the later copied method, which means that onload will only execute the last assigned method.
 fun() is the parameter passed in, here fun() is preload().
This code means:
  If (typeof window.onload != 'function') that is, window.onload has not been assigned a value, it is directly assigned to fun.
  Otherwise, it means that a program has assigned a value to it first. Then after the page is loaded, the existing function should be executed first and then your new fun.
  That is, this code ensures that the method originally loaded in onload is executed (and executed first), preventing it from being overwritten when the fun method is executed (picture preloading).
*/

/*
First, store the photo path in a custom attribute, store a loading gif in src, and when the image reaches the display area, use js to replace the custom attribute into src, and the image will be displayed.
Get all the pictures that need to be loaded on demand into a collection. When scrolling the scroll bar, determine which pictures appear in the visible area. If they appear, perform a loading operation.
After loading is complete, the image will be removed from the collection or array, and eventually there will be fewer and fewer images that need to be loaded in the array.
*/
<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');
//Get the array-like object, which only has the item() method and the length property but no array object methods var imgArr = Array.prototype.slice.call(lazylode);
//Convert the class array into an array lazylodeImg();
//The lazy loading method to be executed should first execute lazy loading to load the pictures in the display area var timer;
window.addEventListener('scroll',function(){
  clearTimeout(timer); //Throttling timer=setTimeout(function(){
    lazylodeImg(); // Screen scrolling performs lazy loading }, 100);
},false)
function lazylodeImg(){
  for(var i=0;i<imgArr.length;i++){
    if(isVisibleArea(imgArr[i])){//Judge whether it is in the visible area imgArr[i].src=imgArr[i].getAttribute('data-src');
      //Modify src to the custom attribute imgArr.splice(i,1);//Remove the loaded images from the array array i--;
      //Because the number with subscript 1 is deleted from the array, the original number with subscript 2 is carried to 1}
  }
}
function isVisibleArea(el){
  var rect = el.getBoundingClientRect();
  //Get the top, left and other values ​​of the element from the visible area return rect.bottom>0 && rect.top<window.innerHeight && rect.right>0 && rect.left<window.innerHeight;
  // will return true if both are true
}
</script>