原生Js的图片预加载和懒加载技术

各种宽高

页可见区域宽： document.body.clientWidth;||document.documentElement.clientWidth
网页可见区域高： document.body.clientHeight;document.documentElement.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;

懒加载技术

为什么要用到懒加载

在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。这也就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载–到可视区域再加载。

怎样实现懒加载呢？

思路：将页面里所有img属性src属性用data-xx代替，监听滚动，直接用window.onscroll(),当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-xx的值赋给src。
img标签代码实现：如下所示

<image src='default.png' :data-src='item.allPics' class='lazyloadimg'>

加载代码实现：

window.onscroll =_.throttle(this.watchscroll, 200);
watchscroll () {
var bodyScrollHeight = document.body.scrollTop;// body滚动高度
var windowHeight = window.innerHeight;// 视窗高度
var imgs = document.getElementsByClassName('lazyloadimg');
for (var i =0; i < imgs.length; i++) {
var imgHeight = imgs[i].offsetTop;// 图片距离顶部高度
if (imgHeight < windowHeight + bodyScrollHeight) {
imgs[i].src = imgs[i].getAttribute('data-src'); //src属性由data-src属性替代了
img[i].className = img[i].className.replace('lazyloadimg','');
        }
    }
}