为自己的网站定制图片懒加载

前言

懒加载其实就是延迟加载，是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示的时候再发送图片请求，避免打开网页时加载过多资源。

前阵子经过我的一阵copy发现，百度上的几乎都不适合我。。。
像我这种自力更生，以自身之力走到了如今这种地步的人，
毫不犹豫选择了，自己动手，丰衣足食。再怎么copy都不如自己
动手为网站定制一个！

思路

在这之前先说一下“data-src这个img的’属性’”，很多人都用这个属性装图片链接，
我也不例外。简单思路，通过js把img标签的data-src里的图片链接取出在必要时赋值给src即可。
当然，这是简单思路常规思路，又怎么适合鄙站呢！而且百度的图片标签的src都是空的。我文章不算多但也不算少，要是一个一个改多麻烦！

定制

废话不多说，开始。

滚动条

毫无疑问，长的文章是有滚动条的，而有些文章是没有滚动条的，没有滚动条的或者说超短的文章就不需要这懒加载了，那么第一步就是判断是否有滚动条:

1
2
3

function hasScrollbar() {
    return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
}

去原链接

即把src的图片链接放到data-src里，这是我的懒惰需要。。。
不多说，直接上代码:

$("img").each(function(){
if(this.className == 'site-author-image'){return;}
string=$(this).attr("src");
if (string != "undefined" && string != undefined ){
$(this).attr("src","");
$(this).attr("data-src",string);
}});

可以看到有个判断，这就是量站定制的好处，不想懒加载的图片直接加个判断，清晰明了。

执行时间

毫无疑问，什么时候执行是必须需要想的问题。如果把js放到head标签内或者说
在img标签还没加载出来就执行显然是无效的
那么最好自然就是在所有标签加载出来的时候开始执行。从上面的代码可以看出我是用了jQuery的，这里自然也不例外。
如果不想用jQuery也行，具体方法我懒得想，自行百度。
至于用jQuery，自然是:

$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});

lazyimages

百度可知，

document.documentElement.clientHeight

代表了显示的部分文档高度，

document.documentElement.scrollTop

代表了屏高到文档顶部的距离，也是滚动条滚动的距离，

element.offsetTop

代表了元素到文档顶部的距离，如果没错的话！
那么可以想象一下将第一个红色记为one，第二个记为two，第三个记为three，那么当元素与屏幕底部相遇的那一刻不就是one+two=three。
如此一来，当one+two>three时就是图片正在被读或被读过后，那么此时就可以给src赋值，让图片显示出来。
然后封装成一个函数，例如:

var imgs = document.getElementsByTagName('img');//放在函数外，不用多次调用
function lazyimages(){
   var one = document.documentElement.clientHeight;
   var three = document.documentElement.scrollTop;
   for (var i = 0; i < imgs.length; i++){
   var two = imgs[i].offsetTop;
   if(one+three>two){
   if(imgs[i].className == 'site-author-image'){return;}
   imgs[i].src = imgs[i].getAttribute('data-src')
   }
   }
}

函数节流

然后百度上找一个函数节流，略作修改:

var previous = null;
function throttle(mustRun = 1000) {
  const timer = null;
  
    const now = ( new Date()).valueOf();
    if (!previous){
      previous = now;
    }
    const remaining = now - previous;
    if (mustRun && remaining >= mustRun) {
      lazyimages();
      previous = now;
    }
}

监听

监听滚动条滚动的事件

1	document.addEventListener('scroll',function(){throttle();});

END

自此大功告成！但是实验表明这看似懒加载，实际上已经不是懒加载了。因为加载标签的那一刻，请求就已经发送出去了。所以没有省流量的效果！
那么来思考一下，浏览器加载网页→加载到img标签→加载图像以及标签加载完毕，开始执行js，而图像还没加载完，所以理论上，可以加快window.onload的触发速度，加快网页的加载速度……差不多就酱。