图片懒加载_前端技术_我的小家_八零在线_符号象

<pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'JetBrains Mono',monospace;font-size:9.8pt;">/** * 懒加载 * @description 可加载`<img>`、`<video>`、`<audio>`等一些引用资源路径的标签 * @param {object} params 传参对象 * @param {string?} params.lazyAttr 自定义加载的属性（可选） * @param {"src"|"background"} params.loadType 加载的类型（默认为`src`） * @param {string?} params.errorPath 加载失败时显示的资源路径，仅在`loadType`设置为`src`中可用（可选） */ function lazyLoad(params) { var attr = (params && params.lazyAttr) || "lazy";    var type = (params && params.loadType) || "src";    /** 更新整个文档的懒加载节点 */    function update() { var els = document.querySelectorAll("[" + attr + "]");        for (var i = 0; i < els.length; i++) { var el = els[i];            observer.observe(el);        } } /**     * 加载图片     * @param {HTMLImageElement} el 图片节点     */    function loadImage(el) { var cache = el.src; // 缓存当前`src`加载失败时候用        el.src = el.getAttribute(attr);        el.onerror = function () { el.src = (params && params.errorPath) || cache;        };    } /**     * 加载单个节点     * @param {HTMLElement} el     */    function loadElement(el) { switch (type) { case "src": loadImage(el);                break;            case "background": el.style.backgroundImage = "url(" + el.getAttribute(attr) + ")";                break;        } el.removeAttribute(attr);        observer.unobserve(el);    } /**     * 监听器     * [MDN说明](https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver)     */    var observer = new IntersectionObserver(function (entries) { for (var i = 0; i < entries.length; i++) { var item = entries[i];            if (item.isIntersecting) { loadElement(item.target);            } } });    update();    return { observer: observer,        update: update    }; }</pre>低版本浏览器请在上面的代码前引入<pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'JetBrains Mono',monospace;font-size:9.8pt;"><script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script></pre>参考<span style="color: rgb(49, 49, 49); font-family: "Microsoft Yahei UI", "Microsoft Yahei", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "Hiragino Sans GB", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">来源：https://juejin.cn/post/6844904066418491406#heading-3