util.mjs 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. import { inBrowser } from "@vant/use";
  2. const hasIntersectionObserver = inBrowser && "IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype;
  3. const modeType = {
  4. event: "event",
  5. observer: "observer"
  6. };
  7. function remove(arr, item) {
  8. if (!arr.length)
  9. return;
  10. const index = arr.indexOf(item);
  11. if (index > -1)
  12. return arr.splice(index, 1);
  13. }
  14. function getBestSelectionFromSrcset(el, scale) {
  15. if (el.tagName !== "IMG" || !el.getAttribute("data-srcset"))
  16. return;
  17. let options = el.getAttribute("data-srcset");
  18. const container = el.parentNode;
  19. const containerWidth = container.offsetWidth * scale;
  20. let spaceIndex;
  21. let tmpSrc;
  22. let tmpWidth;
  23. options = options.trim().split(",");
  24. const result = options.map((item) => {
  25. item = item.trim();
  26. spaceIndex = item.lastIndexOf(" ");
  27. if (spaceIndex === -1) {
  28. tmpSrc = item;
  29. tmpWidth = 999998;
  30. } else {
  31. tmpSrc = item.substr(0, spaceIndex);
  32. tmpWidth = parseInt(
  33. item.substr(spaceIndex + 1, item.length - spaceIndex - 2),
  34. 10
  35. );
  36. }
  37. return [tmpWidth, tmpSrc];
  38. });
  39. result.sort((a, b) => {
  40. if (a[0] < b[0]) {
  41. return 1;
  42. }
  43. if (a[0] > b[0]) {
  44. return -1;
  45. }
  46. if (a[0] === b[0]) {
  47. if (b[1].indexOf(".webp", b[1].length - 5) !== -1) {
  48. return 1;
  49. }
  50. if (a[1].indexOf(".webp", a[1].length - 5) !== -1) {
  51. return -1;
  52. }
  53. }
  54. return 0;
  55. });
  56. let bestSelectedSrc = "";
  57. let tmpOption;
  58. for (let i = 0; i < result.length; i++) {
  59. tmpOption = result[i];
  60. bestSelectedSrc = tmpOption[1];
  61. const next = result[i + 1];
  62. if (next && next[0] < containerWidth) {
  63. bestSelectedSrc = tmpOption[1];
  64. break;
  65. } else if (!next) {
  66. bestSelectedSrc = tmpOption[1];
  67. break;
  68. }
  69. }
  70. return bestSelectedSrc;
  71. }
  72. const getDPR = (scale = 1) => inBrowser ? window.devicePixelRatio || scale : scale;
  73. function supportWebp() {
  74. if (!inBrowser)
  75. return false;
  76. let support = true;
  77. try {
  78. const elem = document.createElement("canvas");
  79. if (elem.getContext && elem.getContext("2d")) {
  80. support = elem.toDataURL("image/webp").indexOf("data:image/webp") === 0;
  81. }
  82. } catch (err) {
  83. support = false;
  84. }
  85. return support;
  86. }
  87. function throttle(action, delay) {
  88. let timeout = null;
  89. let lastRun = 0;
  90. return function(...args) {
  91. if (timeout) {
  92. return;
  93. }
  94. const elapsed = Date.now() - lastRun;
  95. const runCallback = () => {
  96. lastRun = Date.now();
  97. timeout = false;
  98. action.apply(this, args);
  99. };
  100. if (elapsed >= delay) {
  101. runCallback();
  102. } else {
  103. timeout = setTimeout(runCallback, delay);
  104. }
  105. };
  106. }
  107. function on(el, type, func) {
  108. el.addEventListener(type, func, {
  109. capture: false,
  110. passive: true
  111. });
  112. }
  113. function off(el, type, func) {
  114. el.removeEventListener(type, func, false);
  115. }
  116. const loadImageAsync = (item, resolve, reject) => {
  117. const image = new Image();
  118. if (!item || !item.src) {
  119. return reject(new Error("image src is required"));
  120. }
  121. image.src = item.src;
  122. if (item.cors) {
  123. image.crossOrigin = item.cors;
  124. }
  125. image.onload = () => resolve({
  126. naturalHeight: image.naturalHeight,
  127. naturalWidth: image.naturalWidth,
  128. src: image.src
  129. });
  130. image.onerror = (e) => reject(e);
  131. };
  132. class ImageCache {
  133. constructor({ max }) {
  134. this.options = {
  135. max: max || 100
  136. };
  137. this.caches = [];
  138. }
  139. has(key) {
  140. return this.caches.indexOf(key) > -1;
  141. }
  142. add(key) {
  143. if (this.has(key))
  144. return;
  145. this.caches.push(key);
  146. if (this.caches.length > this.options.max) {
  147. this.free();
  148. }
  149. }
  150. free() {
  151. this.caches.shift();
  152. }
  153. }
  154. export {
  155. ImageCache,
  156. getBestSelectionFromSrcset,
  157. getDPR,
  158. hasIntersectionObserver,
  159. loadImageAsync,
  160. modeType,
  161. off,
  162. on,
  163. remove,
  164. supportWebp,
  165. throttle
  166. };