图片懒加载

int64 发布于2019-08-21 18:28 / 1480人阅读

摘要：假设来表示图片到可视区域顶部距离并设来表示可视区域的高度。可以是单一的也可以是数组，元素和元素相交程度达到该值的时候注册的回调函数将会被执行。默认值是意味着只要有一个像素出现在元素中，回调函数将会被执行。

[TOC]

图片懒加载 什么是懒加载

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

解决方案

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元素中时候回调才会被执行。

兼容性

Chrome 51+（发布于 2016-05-25）

Android 5+ （Chrome 56 发布于 2017-02-06）

Edge 15 （2017-04-11）

iOS 不支持

WICG 提供了一个 polyfill

✔	✔	6+	✔	7+	✔

注意点

IntersectionObserver API 是异步的，不随着目标元素的滚动同步触发。

规格写明，IntersectionObserver的实现，应该采用requestIdleCallback()，即只有线程空闲下来，才会执行观察器。这意味着，这个观察器的优先级非常低，只在其他任务执行完，浏览器有了空闲才会执行。

参考

http://www.ruanyifeng.com/blo...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90500.html

图片的预加载和懒加载

摘要：图片的预加载是提升用户体验而损失性能的一种做法，而懒加载的性能就比较好了，所以将两个结合起来放到程序中是一种不错的选择。最近在做H5滑页时，遇到一些比较大的场景，动辄二十、三十页，而图片更是可恨的能达到上百个，所以就会导致场景在加载的时候遇到网速比较慢的时候，用户等待的时间特别长，这样的话，就有可能导致一部分的用户没有耐心，而丢失这部分用户，于是就有了这里的图片的预加载和懒加载，记个...

SwordFly 2019-08-21 10:37 评论0 收藏0
手摸手-100行代码自己动手写个功能完整的图片懒加载插件

摘要：景科同学的想法很简单，因为本人目前还是一个前端小白，只有通过不断的写，不断的学，在与的相爱相杀中才能更快速的进步。本项目是景科同学自写自测，虽然比较简单，但是不保证没有隐藏的。所以如果看官同学发现还望留言指正，景科同学在此以示感谢。 showImg(https://segmentfault.com/img/remote/1460000014251310?w=841&h=630); 本文...

CompileYouth 2019-08-22 16:07 评论0 收藏0
淘宝新势力周H5性能优化实战

摘要：前言淘宝新势力周春上新是命运石链路链路第一次承接级大促，面对级大促内容丰富且复杂的页面需求，链路遇到了一些性能问题，在未进行性能优化之前，搭建出来的页面，业务方普遍反馈页面卡顿严重，无法滑动。前言淘宝新势力周（春上新）是命运石kimi链路（H5链路）第一次承接S级大促，面对S级大促内容丰富且复杂的页面需求，kimi链路遇到了一些性能问题，在未进行性能优化之前，搭建出来的页面，业务方...

Lionad-Morotar 2019-08-22 16:17 评论0 收藏0
懒加载和预加载

摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。一、懒加载 1.什么是懒加载 showImg(https://segmentfault.com/img/remote/1460000016666819); 懒加载也...

appetizerio 2019-08-29 16:57 评论0 收藏0
懒加载和预加载

摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。一、懒加载 1.什么是懒加载 showImg(https://segmentfault.com/img/remote/1460000016666819); 懒加载也...

Shonim 2019-08-02 11:41 评论0 收藏0
懒加载和预加载

摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。一、懒加载 1.什么是懒加载 showImg(https://segmentfault.com/img/remote/1460000016666819); 懒加载也...

hedzr 2019-08-23 12:19 评论0 收藏0