图片懒加载

[TOC]

图片懒加载

什么是懒加载

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

解决方案

<img class="J_imgLazyload" src="//img14.360buyimg.com/cms/g10/M00/13/04/rBEQWFFj4PUIAAAAAAAESxyqJLUAADvdAIHC9oAAARj186.gif" data-url="//img11.360buyimg.com/cms/jfs/t12118/41/1394617476/43413/2253395a/5a1f7569N63f38100.jpg" />

src先放一张占位图, 待该元素出现在"视口", 将src 替换成data-url的值.

优化

函数节流

//滚动执行
var timer = 0;
        $(window).on("scroll", function () {
            clearTimeout(timer);
            setTimeout(function () {
                loading();
            },150)
        });

如何判断元素是否在可视区域

方法一

// post 距离屏幕顶端的 距离
var post = $('img').offset().top - $(window).scrollTop(); 
// posb  距离屏幕顶端的距离 + 自身的高度
var posb = post + o.height();
// 屏幕高度
var  contHeight= $(window).height();

if ((post >= 0 && post < contHeight) || (posb > 0 && posb <= contHeight)) {
  // 在当前屏幕内
}else{
  // 不在当前屏幕内
}

方法二

getBoundingClientRect()

var rectObject = object.getBoundingClientRect();

这个方法返回一个名为ClientRect的DOMRect对象，包含了top、right、botton、left、width、height这些值。

可以看出返回的元素位置是相对于左上角而言的，而不是边距。

我们思考一下，什么情况下图片进入可视区域。

假设const bound = el.getBoundingClientRect();来表示图片到可视区域顶部距离；
并设 const clientHeight = window.innerHeight;来表示可视区域的高度。

随着滚动条的向下滚动，bound.top会越来越小，也就是图片到可视区域顶部的距离越来越小，当bound.top===clientHeight时，图片的上沿应该是位于可视区域下沿的位置的临界点，再滚动一点点，图片就会进入可视区域

function isInSight(el) {
  const bound = el.getBoundingClientRect();
  const clientHeight = window.innerHeight;
  //如果只考虑向下滚动加载
  //const clientWidth = window.innerWeight;
  return bound.top <= clientHeight + 100; // +100 预加载
}

方法三

IntersectionObserver — 交叉观察器"

const io = new IntersectionObserver(ioes => {
    console.log(ioes);
    ioes.forEach(ioe => {
        const el = ioe.target;
        // intersectionRatio 目标元素的可见比例
        const intersectionRatio = ioe.intersectionRatio;
        if (intersectionRatio > 0 && intersectionRatio)
        {
            // 出现在视口
            io.unobserve(el);
        }
    });
});

io.observe($('img')[4]);

var options = {
    root: null,  //如果root参数指定为null或者不指定的时候默认使用浏览器视口做为root。
    rootMargin: '0px', 
    threshold: 1.0
}
var callback = function(entries, observer) { 
    /* Content excerpted, show below */ 
  console.log(11111)
};
var observer = new IntersectionObserver(callback, options);

// 开始观察
io.observe(document.getElementById('example'));

// 停止观察
io.unobserve(element);

// 关闭观察器
io.disconnect();

IntersectionObserver是浏览器原生提供的构造函数，接受两个参数：callback是可见性变化时的回调函数，option是配置对象（该参数可选）。

callback函数有2个参数;

参数一: entries .

A list of IntersectionObserverEntry objects(IntersectionObserverEntry对象的列表). 内容如下

属性	描述
time	可见性发生变化的时间，单位为毫秒
rootBounds	与getBoundingClientRect()方法的返回值一样
boundingClientRect	目标元素的矩形区域的信息
intersectionRect	目标元素与视口（或根元素）的交叉区域的信息
intersectionRatio	目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
target	被观察的目标元素，是一个 DOM 节点对象

参数2— observer

root

如果root参数指定为null或者不指定的时候默认使用浏览器视口做为root。

rootMargin

root元素的外边距。类似于css中的 margin 属性，比如 "10px 20px 30px 40px" (top, right, bottom, left)。如果有指定root参数，则rootMargin也可以使用百分比来取值。该属性值是用作root元素和target发生交集时候的计算交集的区域范围，使用该属性可以控制root元素每一边的收缩或者扩张。默认值为0。

threshold

可以是单一的number也可以是number数组，target元素和root元素相交程度达到该值的时候IntersectionObserver注册的回调函数将会被执行。如果你只是想要探测当target元素的在root元素中的可见性超过50%的时候，你可以指定该属性值为0.5。如果你想要target元素在root元素的可见程度每多25%就执行一次回调，那么你可以指定一个数组[0, 0.25, 0.5, 0.75, 1]。默认值是0(意味着只要有一个target像素出现在root元素中，回调函数将会被执行)。该值为1.0含义是当target完全出现在root元素中时候回调才会被执行。