实现lazyload懒加载-简易版

1.习惯将img标签的src改成data-src
2.将需要进行懒加载的img标记为class="lazyload"
3.使用：在app.js中，传进去的是一个数组

lazyload(document.querySelectorAll('.lazyload')) //这里传进去的是一个数组

4.实现：lazyload.js中

function lazyload(images){
  let imgs = [].slice.call(images) //这样写如果images是空的也不会报错
  let onscroll = function(){
    if(imgs.length === 0){
      return window.removeEventListener('scroll', onscroll) //如果需要进行懒加载的数组为空，那么取消scroll事件监听
    }
    imgs = imgs.filter(img => img.classList.contain('lazyload')) //过滤出没有标记的img
    imgs.forEach(img =>{
      //如果在可视窗口中的img，就加载，不在可视窗口的就不加载，等滚动到了再加载
     if(inViewPort(img)){ 
      loadImage(img)
    } 
   })
  }
}
function inViewPort(img){
  let {top, right, bottom, left } = img.getBoundingClientRect() //获取元素到可视窗口边缘的距离
  let vpWidth = document.documentElement.ClientWidth
  let vpHeight = document.documentElement.ClientHeight
  //至少两边出现在视口中，则视为需要直接加载状态
  return (top > 0 && top < vpHeight || bottom > 0 && bottom < vpHeight) 
          && (left >0 && left < vpWidth || right >0 && right < vpWidth) 
}
//进行加载图片的操作
function loadImage(img){
  let image = new Image() 
  image.src = img.dataset.src //将img的dataset上面的src赋值给新建的图片对象
  image.onload = function(){
    //加载的时候将image的src赋值给img，那么此时的src才生效，页面才可以显示图片
    img.src = image.src
    img.classList.remove('lazyload') //操作完成后，去掉这一张图片的标记
  }
}

实际上，在日常的项目中，只需要下载lazyload插件即可使用lazyload。