lazy.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
  1. var __create = Object.create;
  2. var __defProp = Object.defineProperty;
  3. var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  4. var __getOwnPropNames = Object.getOwnPropertyNames;
  5. var __getProtoOf = Object.getPrototypeOf;
  6. var __hasOwnProp = Object.prototype.hasOwnProperty;
  7. var __export = (target, all) => {
  8. for (var name in all)
  9. __defProp(target, name, { get: all[name], enumerable: true });
  10. };
  11. var __copyProps = (to, from, except, desc) => {
  12. if (from && typeof from === "object" || typeof from === "function") {
  13. for (let key of __getOwnPropNames(from))
  14. if (!__hasOwnProp.call(to, key) && key !== except)
  15. __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  16. }
  17. return to;
  18. };
  19. var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  20. isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  21. mod
  22. ));
  23. var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  24. var stdin_exports = {};
  25. __export(stdin_exports, {
  26. default: () => stdin_default
  27. });
  28. module.exports = __toCommonJS(stdin_exports);
  29. var import_vue = require("vue");
  30. var import_use = require("@vant/use");
  31. var import_util = require("./util");
  32. var import_utils = require("../../utils");
  33. var import_listener = __toESM(require("./listener"));
  34. const DEFAULT_URL = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
  35. const DEFAULT_EVENTS = [
  36. "scroll",
  37. "wheel",
  38. "mousewheel",
  39. "resize",
  40. "animationend",
  41. "transitionend",
  42. "touchmove"
  43. ];
  44. const DEFAULT_OBSERVER_OPTIONS = {
  45. rootMargin: "0px",
  46. threshold: 0
  47. };
  48. function stdin_default() {
  49. return class Lazy {
  50. constructor({
  51. preLoad,
  52. error,
  53. throttleWait,
  54. preLoadTop,
  55. dispatchEvent,
  56. loading,
  57. attempt,
  58. silent = true,
  59. scale,
  60. listenEvents,
  61. filter,
  62. adapter,
  63. observer,
  64. observerOptions
  65. }) {
  66. this.mode = import_util.modeType.event;
  67. this.listeners = [];
  68. this.targetIndex = 0;
  69. this.targets = [];
  70. this.options = {
  71. silent,
  72. dispatchEvent: !!dispatchEvent,
  73. throttleWait: throttleWait || 200,
  74. preLoad: preLoad || 1.3,
  75. preLoadTop: preLoadTop || 0,
  76. error: error || DEFAULT_URL,
  77. loading: loading || DEFAULT_URL,
  78. attempt: attempt || 3,
  79. scale: scale || (0, import_util.getDPR)(scale),
  80. ListenEvents: listenEvents || DEFAULT_EVENTS,
  81. supportWebp: (0, import_util.supportWebp)(),
  82. filter: filter || {},
  83. adapter: adapter || {},
  84. observer: !!observer,
  85. observerOptions: observerOptions || DEFAULT_OBSERVER_OPTIONS
  86. };
  87. this.initEvent();
  88. this.imageCache = new import_util.ImageCache({ max: 200 });
  89. this.lazyLoadHandler = (0, import_util.throttle)(
  90. this.lazyLoadHandler.bind(this),
  91. this.options.throttleWait
  92. );
  93. this.setMode(this.options.observer ? import_util.modeType.observer : import_util.modeType.event);
  94. }
  95. config(options = {}) {
  96. Object.assign(this.options, options);
  97. }
  98. performance() {
  99. return this.listeners.map((item) => item.performance());
  100. }
  101. addLazyBox(vm) {
  102. this.listeners.push(vm);
  103. if (import_use.inBrowser) {
  104. this.addListenerTarget(window);
  105. this.observer && this.observer.observe(vm.el);
  106. if (vm.$el && vm.$el.parentNode) {
  107. this.addListenerTarget(vm.$el.parentNode);
  108. }
  109. }
  110. }
  111. add(el, binding, vnode) {
  112. if (this.listeners.some((item) => item.el === el)) {
  113. this.update(el, binding);
  114. return (0, import_vue.nextTick)(this.lazyLoadHandler);
  115. }
  116. const value = this.valueFormatter(binding.value);
  117. let { src } = value;
  118. (0, import_vue.nextTick)(() => {
  119. src = (0, import_util.getBestSelectionFromSrcset)(el, this.options.scale) || src;
  120. this.observer && this.observer.observe(el);
  121. const container = Object.keys(binding.modifiers)[0];
  122. let $parent;
  123. if (container) {
  124. $parent = vnode.context.$refs[container];
  125. $parent = $parent ? $parent.$el || $parent : document.getElementById(container);
  126. }
  127. if (!$parent) {
  128. $parent = (0, import_use.getScrollParent)(el);
  129. }
  130. const newListener = new import_listener.default({
  131. bindType: binding.arg,
  132. $parent,
  133. el,
  134. src,
  135. loading: value.loading,
  136. error: value.error,
  137. cors: value.cors,
  138. elRenderer: this.elRenderer.bind(this),
  139. options: this.options,
  140. imageCache: this.imageCache
  141. });
  142. this.listeners.push(newListener);
  143. if (import_use.inBrowser) {
  144. this.addListenerTarget(window);
  145. this.addListenerTarget($parent);
  146. }
  147. this.lazyLoadHandler();
  148. (0, import_vue.nextTick)(() => this.lazyLoadHandler());
  149. });
  150. }
  151. update(el, binding, vnode) {
  152. const value = this.valueFormatter(binding.value);
  153. let { src } = value;
  154. src = (0, import_util.getBestSelectionFromSrcset)(el, this.options.scale) || src;
  155. const exist = this.listeners.find((item) => item.el === el);
  156. if (!exist) {
  157. this.add(el, binding, vnode);
  158. } else {
  159. exist.update({
  160. src,
  161. error: value.error,
  162. loading: value.loading
  163. });
  164. }
  165. if (this.observer) {
  166. this.observer.unobserve(el);
  167. this.observer.observe(el);
  168. }
  169. this.lazyLoadHandler();
  170. (0, import_vue.nextTick)(() => this.lazyLoadHandler());
  171. }
  172. remove(el) {
  173. if (!el)
  174. return;
  175. this.observer && this.observer.unobserve(el);
  176. const existItem = this.listeners.find((item) => item.el === el);
  177. if (existItem) {
  178. this.removeListenerTarget(existItem.$parent);
  179. this.removeListenerTarget(window);
  180. (0, import_util.remove)(this.listeners, existItem);
  181. existItem.$destroy();
  182. }
  183. }
  184. removeComponent(vm) {
  185. if (!vm)
  186. return;
  187. (0, import_util.remove)(this.listeners, vm);
  188. this.observer && this.observer.unobserve(vm.el);
  189. if (vm.$parent && vm.$el.parentNode) {
  190. this.removeListenerTarget(vm.$el.parentNode);
  191. }
  192. this.removeListenerTarget(window);
  193. }
  194. setMode(mode) {
  195. if (!import_util.hasIntersectionObserver && mode === import_util.modeType.observer) {
  196. mode = import_util.modeType.event;
  197. }
  198. this.mode = mode;
  199. if (mode === import_util.modeType.event) {
  200. if (this.observer) {
  201. this.listeners.forEach((listener) => {
  202. this.observer.unobserve(listener.el);
  203. });
  204. this.observer = null;
  205. }
  206. this.targets.forEach((target) => {
  207. this.initListen(target.el, true);
  208. });
  209. } else {
  210. this.targets.forEach((target) => {
  211. this.initListen(target.el, false);
  212. });
  213. this.initIntersectionObserver();
  214. }
  215. }
  216. addListenerTarget(el) {
  217. if (!el)
  218. return;
  219. let target = this.targets.find((target2) => target2.el === el);
  220. if (!target) {
  221. target = {
  222. el,
  223. id: ++this.targetIndex,
  224. childrenCount: 1,
  225. listened: true
  226. };
  227. this.mode === import_util.modeType.event && this.initListen(target.el, true);
  228. this.targets.push(target);
  229. } else {
  230. target.childrenCount++;
  231. }
  232. return this.targetIndex;
  233. }
  234. removeListenerTarget(el) {
  235. this.targets.forEach((target, index) => {
  236. if (target.el === el) {
  237. target.childrenCount--;
  238. if (!target.childrenCount) {
  239. this.initListen(target.el, false);
  240. this.targets.splice(index, 1);
  241. target = null;
  242. }
  243. }
  244. });
  245. }
  246. initListen(el, start) {
  247. this.options.ListenEvents.forEach(
  248. (evt) => (start ? import_util.on : import_util.off)(el, evt, this.lazyLoadHandler)
  249. );
  250. }
  251. initEvent() {
  252. this.Event = {
  253. listeners: {
  254. loading: [],
  255. loaded: [],
  256. error: []
  257. }
  258. };
  259. this.$on = (event, func) => {
  260. if (!this.Event.listeners[event])
  261. this.Event.listeners[event] = [];
  262. this.Event.listeners[event].push(func);
  263. };
  264. this.$once = (event, func) => {
  265. const on2 = (...args) => {
  266. this.$off(event, on2);
  267. func.apply(this, args);
  268. };
  269. this.$on(event, on2);
  270. };
  271. this.$off = (event, func) => {
  272. if (!func) {
  273. if (!this.Event.listeners[event])
  274. return;
  275. this.Event.listeners[event].length = 0;
  276. return;
  277. }
  278. (0, import_util.remove)(this.Event.listeners[event], func);
  279. };
  280. this.$emit = (event, context, inCache) => {
  281. if (!this.Event.listeners[event])
  282. return;
  283. this.Event.listeners[event].forEach((func) => func(context, inCache));
  284. };
  285. }
  286. lazyLoadHandler() {
  287. const freeList = [];
  288. this.listeners.forEach((listener) => {
  289. if (!listener.el || !listener.el.parentNode) {
  290. freeList.push(listener);
  291. }
  292. const catIn = listener.checkInView();
  293. if (!catIn)
  294. return;
  295. listener.load();
  296. });
  297. freeList.forEach((item) => {
  298. (0, import_util.remove)(this.listeners, item);
  299. item.$destroy();
  300. });
  301. }
  302. initIntersectionObserver() {
  303. if (!import_util.hasIntersectionObserver) {
  304. return;
  305. }
  306. this.observer = new IntersectionObserver(
  307. this.observerHandler.bind(this),
  308. this.options.observerOptions
  309. );
  310. if (this.listeners.length) {
  311. this.listeners.forEach((listener) => {
  312. this.observer.observe(listener.el);
  313. });
  314. }
  315. }
  316. observerHandler(entries) {
  317. entries.forEach((entry) => {
  318. if (entry.isIntersecting) {
  319. this.listeners.forEach((listener) => {
  320. if (listener.el === entry.target) {
  321. if (listener.state.loaded)
  322. return this.observer.unobserve(listener.el);
  323. listener.load();
  324. }
  325. });
  326. }
  327. });
  328. }
  329. elRenderer(listener, state, cache) {
  330. if (!listener.el)
  331. return;
  332. const { el, bindType } = listener;
  333. let src;
  334. switch (state) {
  335. case "loading":
  336. src = listener.loading;
  337. break;
  338. case "error":
  339. src = listener.error;
  340. break;
  341. default:
  342. ({ src } = listener);
  343. break;
  344. }
  345. if (bindType) {
  346. el.style[bindType] = 'url("' + src + '")';
  347. } else if (el.getAttribute("src") !== src) {
  348. el.setAttribute("src", src);
  349. }
  350. el.setAttribute("lazy", state);
  351. this.$emit(state, listener, cache);
  352. this.options.adapter[state] && this.options.adapter[state](listener, this.options);
  353. if (this.options.dispatchEvent) {
  354. const event = new CustomEvent(state, {
  355. detail: listener
  356. });
  357. el.dispatchEvent(event);
  358. }
  359. }
  360. valueFormatter(value) {
  361. let src = value;
  362. let { loading, error } = this.options;
  363. if ((0, import_utils.isObject)(value)) {
  364. if (process.env.NODE_ENV !== "production" && !value.src && !this.options.silent) {
  365. console.error("[@vant/lazyload] miss src with " + value);
  366. }
  367. ({ src } = value);
  368. loading = value.loading || this.options.loading;
  369. error = value.error || this.options.error;
  370. }
  371. return {
  372. src,
  373. loading,
  374. error
  375. };
  376. }
  377. };
  378. }