var __create = Object.create; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __getProtoOf = Object.getPrototypeOf; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( // If the importer is in node compatibility mode or this is not an ESM // file that has been converted to a CommonJS file using a Babel- // compatible transform (i.e. "__esModule" has not been set), then set // "default" to the CommonJS "module.exports" for node compatibility. isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod )); var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); var stdin_exports = {}; __export(stdin_exports, { default: () => stdin_default }); module.exports = __toCommonJS(stdin_exports); var import_vue = require("vue"); var import_use = require("@vant/use"); var import_util = require("./util"); var import_utils = require("../../utils"); var import_listener = __toESM(require("./listener")); const DEFAULT_URL = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"; const DEFAULT_EVENTS = [ "scroll", "wheel", "mousewheel", "resize", "animationend", "transitionend", "touchmove" ]; const DEFAULT_OBSERVER_OPTIONS = { rootMargin: "0px", threshold: 0 }; function stdin_default() { return class Lazy { constructor({ preLoad, error, throttleWait, preLoadTop, dispatchEvent, loading, attempt, silent = true, scale, listenEvents, filter, adapter, observer, observerOptions }) { this.mode = import_util.modeType.event; this.listeners = []; this.targetIndex = 0; this.targets = []; this.options = { silent, dispatchEvent: !!dispatchEvent, throttleWait: throttleWait || 200, preLoad: preLoad || 1.3, preLoadTop: preLoadTop || 0, error: error || DEFAULT_URL, loading: loading || DEFAULT_URL, attempt: attempt || 3, scale: scale || (0, import_util.getDPR)(scale), ListenEvents: listenEvents || DEFAULT_EVENTS, supportWebp: (0, import_util.supportWebp)(), filter: filter || {}, adapter: adapter || {}, observer: !!observer, observerOptions: observerOptions || DEFAULT_OBSERVER_OPTIONS }; this.initEvent(); this.imageCache = new import_util.ImageCache({ max: 200 }); this.lazyLoadHandler = (0, import_util.throttle)( this.lazyLoadHandler.bind(this), this.options.throttleWait ); this.setMode(this.options.observer ? import_util.modeType.observer : import_util.modeType.event); } /** * update config * @param {Object} config params * @return */ config(options = {}) { Object.assign(this.options, options); } /** * output listener's load performance * @return {Array} */ performance() { return this.listeners.map((item) => item.performance()); } /* * add lazy component to queue * @param {Vue} vm lazy component instance * @return */ addLazyBox(vm) { this.listeners.push(vm); if (import_use.inBrowser) { this.addListenerTarget(window); this.observer && this.observer.observe(vm.el); if (vm.$el && vm.$el.parentNode) { this.addListenerTarget(vm.$el.parentNode); } } } /* * add image listener to queue * @param {DOM} el * @param {object} binding vue directive binding * @param {vnode} vnode vue directive vnode * @return */ add(el, binding, vnode) { if (this.listeners.some((item) => item.el === el)) { this.update(el, binding); return (0, import_vue.nextTick)(this.lazyLoadHandler); } const value = this.valueFormatter(binding.value); let { src } = value; (0, import_vue.nextTick)(() => { src = (0, import_util.getBestSelectionFromSrcset)(el, this.options.scale) || src; this.observer && this.observer.observe(el); const container = Object.keys(binding.modifiers)[0]; let $parent; if (container) { $parent = vnode.context.$refs[container]; $parent = $parent ? $parent.$el || $parent : document.getElementById(container); } if (!$parent) { $parent = (0, import_use.getScrollParent)(el); } const newListener = new import_listener.default({ bindType: binding.arg, $parent, el, src, loading: value.loading, error: value.error, cors: value.cors, elRenderer: this.elRenderer.bind(this), options: this.options, imageCache: this.imageCache }); this.listeners.push(newListener); if (import_use.inBrowser) { this.addListenerTarget(window); this.addListenerTarget($parent); } this.lazyLoadHandler(); (0, import_vue.nextTick)(() => this.lazyLoadHandler()); }); } /** * update image src * @param {DOM} el * @param {object} vue directive binding * @return */ update(el, binding, vnode) { const value = this.valueFormatter(binding.value); let { src } = value; src = (0, import_util.getBestSelectionFromSrcset)(el, this.options.scale) || src; const exist = this.listeners.find((item) => item.el === el); if (!exist) { this.add(el, binding, vnode); } else { exist.update({ src, error: value.error, loading: value.loading }); } if (this.observer) { this.observer.unobserve(el); this.observer.observe(el); } this.lazyLoadHandler(); (0, import_vue.nextTick)(() => this.lazyLoadHandler()); } /** * remove listener form list * @param {DOM} el * @return */ remove(el) { if (!el) return; this.observer && this.observer.unobserve(el); const existItem = this.listeners.find((item) => item.el === el); if (existItem) { this.removeListenerTarget(existItem.$parent); this.removeListenerTarget(window); (0, import_util.remove)(this.listeners, existItem); existItem.$destroy(); } } /* * remove lazy components form list * @param {Vue} vm Vue instance * @return */ removeComponent(vm) { if (!vm) return; (0, import_util.remove)(this.listeners, vm); this.observer && this.observer.unobserve(vm.el); if (vm.$parent && vm.$el.parentNode) { this.removeListenerTarget(vm.$el.parentNode); } this.removeListenerTarget(window); } setMode(mode) { if (!import_util.hasIntersectionObserver && mode === import_util.modeType.observer) { mode = import_util.modeType.event; } this.mode = mode; if (mode === import_util.modeType.event) { if (this.observer) { this.listeners.forEach((listener) => { this.observer.unobserve(listener.el); }); this.observer = null; } this.targets.forEach((target) => { this.initListen(target.el, true); }); } else { this.targets.forEach((target) => { this.initListen(target.el, false); }); this.initIntersectionObserver(); } } /* *** Private functions *** */ /* * add listener target * @param {DOM} el listener target * @return */ addListenerTarget(el) { if (!el) return; let target = this.targets.find((target2) => target2.el === el); if (!target) { target = { el, id: ++this.targetIndex, childrenCount: 1, listened: true }; this.mode === import_util.modeType.event && this.initListen(target.el, true); this.targets.push(target); } else { target.childrenCount++; } return this.targetIndex; } /* * remove listener target or reduce target childrenCount * @param {DOM} el or window * @return */ removeListenerTarget(el) { this.targets.forEach((target, index) => { if (target.el === el) { target.childrenCount--; if (!target.childrenCount) { this.initListen(target.el, false); this.targets.splice(index, 1); target = null; } } }); } /* * add or remove eventlistener * @param {DOM} el DOM or Window * @param {boolean} start flag * @return */ initListen(el, start) { this.options.ListenEvents.forEach( (evt) => (start ? import_util.on : import_util.off)(el, evt, this.lazyLoadHandler) ); } initEvent() { this.Event = { listeners: { loading: [], loaded: [], error: [] } }; this.$on = (event, func) => { if (!this.Event.listeners[event]) this.Event.listeners[event] = []; this.Event.listeners[event].push(func); }; this.$once = (event, func) => { const on2 = (...args) => { this.$off(event, on2); func.apply(this, args); }; this.$on(event, on2); }; this.$off = (event, func) => { if (!func) { if (!this.Event.listeners[event]) return; this.Event.listeners[event].length = 0; return; } (0, import_util.remove)(this.Event.listeners[event], func); }; this.$emit = (event, context, inCache) => { if (!this.Event.listeners[event]) return; this.Event.listeners[event].forEach((func) => func(context, inCache)); }; } /** * find nodes which in viewport and trigger load * @return */ lazyLoadHandler() { const freeList = []; this.listeners.forEach((listener) => { if (!listener.el || !listener.el.parentNode) { freeList.push(listener); } const catIn = listener.checkInView(); if (!catIn) return; listener.load(); }); freeList.forEach((item) => { (0, import_util.remove)(this.listeners, item); item.$destroy(); }); } /** * init IntersectionObserver * set mode to observer * @return */ initIntersectionObserver() { if (!import_util.hasIntersectionObserver) { return; } this.observer = new IntersectionObserver( this.observerHandler.bind(this), this.options.observerOptions ); if (this.listeners.length) { this.listeners.forEach((listener) => { this.observer.observe(listener.el); }); } } /** * init IntersectionObserver * @return */ observerHandler(entries) { entries.forEach((entry) => { if (entry.isIntersecting) { this.listeners.forEach((listener) => { if (listener.el === entry.target) { if (listener.state.loaded) return this.observer.unobserve(listener.el); listener.load(); } }); } }); } /** * set element attribute with image'url and state * @param {object} lazyload listener object * @param {string} state will be rendered * @param {bool} inCache is rendered from cache * @return */ elRenderer(listener, state, cache) { if (!listener.el) return; const { el, bindType } = listener; let src; switch (state) { case "loading": src = listener.loading; break; case "error": src = listener.error; break; default: ({ src } = listener); break; } if (bindType) { el.style[bindType] = 'url("' + src + '")'; } else if (el.getAttribute("src") !== src) { el.setAttribute("src", src); } el.setAttribute("lazy", state); this.$emit(state, listener, cache); this.options.adapter[state] && this.options.adapter[state](listener, this.options); if (this.options.dispatchEvent) { const event = new CustomEvent(state, { detail: listener }); el.dispatchEvent(event); } } /** * generate loading loaded error image url * @param {string} image's src * @return {object} image's loading, loaded, error url */ valueFormatter(value) { let src = value; let { loading, error } = this.options; if ((0, import_utils.isObject)(value)) { if (process.env.NODE_ENV !== "production" && !value.src && !this.options.silent) { console.error("[@vant/lazyload] miss src with " + value); } ({ src } = value); loading = value.loading || this.options.loading; error = value.error || this.options.error; } return { src, loading, error }; } }; }