456 lines
14 KiB
JavaScript
456 lines
14 KiB
JavaScript
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
|
|
};
|
|
}
|
|
};
|
|
}
|