知识点------图片懒加载--以及其中兼容写法指代意义

html结构：

js结构：https://blog.csdn.net/zgjxyszh/article/details/79535086

前言：兼容区别

可视窗口高度：
1. 对于Chrome、Firefox、Opera 以及 Safari： 
window.innerHeight – 浏览器窗口的内部高度 
window.innerWidth – 浏览器窗口的内部宽度 
2.  对于 Internet Explorer 8、7、6、5，即IE8及以下： 
document.documentElement.clientHeight   document.documentElement.clientWidth 
或者 
document.body.clientHeight   document.body.clientWidth 

滚动条高度：
1、各浏览器下 scrollTop的差异 
IE6/7/8： 
对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ； 
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop ； 
Safari: 
safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset ； 
Firefox: 
火狐等等相对标准些的浏览器就省心多了，直接用 document.documentElement.scrollTop ； 
2、获取scrollTop值 
完美的获取scrollTop 赋值短语 ： 
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;


懒加载代码:
let imgs =  document.querySelectorAll('img')
// 可视区高度
let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
function lazyLoad () {
  // 滚动卷去的高度
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  for (let i = 0; i < imgs.length; i ++) {
    // 得到图片顶部距离可视区顶部的距离
    let x = clientHeight + scrollTop - imgs[i].offsetTop
    // 图片在可视区内
    if (x > 0 && x < clientHeight+imgs[i].height) {
      imgs[i].src = imgs[i].getAttribute('data')
    }
  }
}
setInterval(lazyLoad, 1000)