123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378 |
- 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(
- 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);
- }
- config(options = {}) {
- Object.assign(this.options, options);
- }
- performance() {
- return this.listeners.map((item) => item.performance());
- }
- 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(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(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(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();
- }
- }
- 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();
- }
- }
- 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;
- }
- 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;
- }
- }
- });
- }
- 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));
- };
- }
- 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();
- });
- }
- 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);
- });
- }
- }
- 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();
- }
- });
- }
- });
- }
- 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);
- }
- }
- 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
- };
- }
- };
- }
|