性能优化-图片处理

// 获取屏幕可视区域的高度
document.documentElement.clientHeight
 
// 获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离
document.documentElement.scrollTop
 
// 获取元素相对于文档顶部的高度
element.offsetTop

var imgs = document.querySelectorAll('img');
 
// offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
function getTop(e) {
  var T = e.offsetTop;
  while(e = e.offsetParent) {
    T += e.offsetTop;
  }
  return T;
}
 
function lazyLoad(imgs) {
  // 获取可视区域高度
  var H = document.documentElement.clientHeight;
  var S = document.documentElement.scrollTop || document.body.scrollTop;
  for (var i = 0; i < imgs.length; i++) {
    if (H + S > getTop(imgs[i])) {
      imgs[i].src = imgs[i].getAttribute('data-src');
    }
  }
}
 
// onscroll()在滚动条滚动的时候触发
window.onload = window.onscroll = function () {
  lazyLoad(imgs);
}

// 获取元素的大小及位置
getBoundingClientRect()

var imgs = document.querySelectorAll('img');
 
// 用来判断bound.top<=clientHeight的函数，返回一个bool值
function isIn(el) {
  var bound = el.getBoundingClientRect();
  var clientHeight = window.innerHeight;
  return bound.top <= clientHeight;
} 
 
// 检查图片是否在可视区内，如果不在，则加载
function check() {
  Array.from(imgs).forEach(function(el){
    if(isIn(el)){
      loadImg(el);
    }
  })
}
 
function loadImg(el) {
  if(!el.src){
    var source = el.dataset.src;
    el.src = source;
  }
}
 
// onscroll()在滚动条滚动的时候触发
window.onload = window.onscroll = function () {
  check();
}