feat: add @vant/lazyload pacakge

2020-11-30 19:05:28 +08:00
parent 8b69192102
commit b7306e311b
15 changed files with 1693 additions and 6 deletions
@@ -0,0 +1,107 @@
+import { inBrowser, loadImageAsync, noop } from './util';
+
+export default (lazyManager) => {
+  return {
+    props: {
+      src: [String, Object],
+      tag: {
+        type: String,
+        default: 'img',
+      },
+    },
+    render(h) {
+      return h(
+        this.tag,
+        {
+          attrs: {
+            src: this.renderSrc,
+          },
+        },
+        this.$slots.default
+      );
+    },
+    data() {
+      return {
+        el: null,
+        options: {
+          src: '',
+          error: '',
+          loading: '',
+          attempt: lazyManager.options.attempt,
+        },
+        state: {
+          loaded: false,
+          error: false,
+          attempt: 0,
+        },
+        rect: {},
+        renderSrc: '',
+      };
+    },
+    watch: {
+      src() {
+        this.init();
+        lazyManager.addLazyBox(this);
+        lazyManager.lazyLoadHandler();
+      },
+    },
+    created() {
+      this.init();
+      this.renderSrc = this.options.loading;
+    },
+    mounted() {
+      this.el = this.$el;
+      lazyManager.addLazyBox(this);
+      lazyManager.lazyLoadHandler();
+    },
+    beforeUnmount() {
+      lazyManager.removeComponent(this);
+    },
+    methods: {
+      init() {
+        const { src, loading, error } = lazyManager._valueFormatter(this.src);
+        this.state.loaded = false;
+        this.options.src = src;
+        this.options.error = error;
+        this.options.loading = loading;
+        this.renderSrc = this.options.loading;
+      },
+      getRect() {
+        this.rect = this.$el.getBoundingClientRect();
+      },
+      checkInView() {
+        this.getRect();
+        return (
+          inBrowser &&
+          this.rect.top < window.innerHeight * lazyManager.options.preLoad &&
+          this.rect.bottom > 0 &&
+          this.rect.left < window.innerWidth * lazyManager.options.preLoad &&
+          this.rect.right > 0
+        );
+      },
+      load(onFinish = noop) {
+        if (this.state.attempt > this.options.attempt - 1 && this.state.error) {
+          if (!lazyManager.options.silent)
+            console.log(
+              `VueLazyload log: ${this.options.src} tried too more than ${this.options.attempt} times`
+            );
+          onFinish();
+          return;
+        }
+        const { src } = this.options;
+        loadImageAsync(
+          { src },
+          ({ src }) => {
+            this.renderSrc = src;
+            this.state.loaded = true;
+          },
+          () => {
+            this.state.attempt++;
+            this.renderSrc = this.options.error;
+            this.state.error = true;
+          }
+        );
+      },
+    },
+  };
+};