import{o as a,a as t,y as n}from"./vue-libs.b44bc779.js";const l={class:"van-doc-markdown-body"},e=n(`

Lazyload \u61D2\u52A0\u8F7D

\u4ECB\u7ECD

\u5F53\u9875\u9762\u9700\u8981\u52A0\u8F7D\u5927\u91CF\u5185\u5BB9\u65F6\uFF0C\u4F7F\u7528\u61D2\u52A0\u8F7D\u53EF\u4EE5\u5B9E\u73B0\u5EF6\u8FDF\u52A0\u8F7D\u9875\u9762\u53EF\u89C6\u533A\u57DF\u5916\u7684\u5185\u5BB9\uFF0C\u4ECE\u800C\u4F7F\u9875\u9762\u52A0\u8F7D\u66F4\u6D41\u7545\u3002

\u5F15\u5165

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

Lazyload \u662F Vue \u6307\u4EE4\uFF0C\u4F7F\u7528\u524D\u9700\u8981\u5BF9\u6307\u4EE4\u8FDB\u884C\u6CE8\u518C\u3002

import { createApp } from 'vue';
import { Lazyload } from 'vant';

const app = createApp();
app.use(Lazyload);

// \u6CE8\u518C\u65F6\u53EF\u4EE5\u914D\u7F6E\u989D\u5916\u7684\u9009\u9879
app.use(Lazyload, {
  lazyComponent: true,
});

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u5C06 v-lazy \u6307\u4EE4\u7684\u503C\u8BBE\u7F6E\u4E3A\u4F60\u9700\u8981\u61D2\u52A0\u8F7D\u7684\u56FE\u7247\u3002

<img v-for="img in imageList" v-lazy="img" />

export default {
  setup() {
    return {
      imageList: [
        'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
        'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
      ],
    };
  },
};

\u80CC\u666F\u56FE\u61D2\u52A0\u8F7D

\u548C\u56FE\u7247\u61D2\u52A0\u8F7D\u4E0D\u540C\uFF0C\u80CC\u666F\u56FE\u61D2\u52A0\u8F7D\u9700\u8981\u4F7F\u7528 v-lazy:background-image\uFF0C\u503C\u8BBE\u7F6E\u4E3A\u80CC\u666F\u56FE\u7247\u7684\u5730\u5740\uFF0C\u9700\u8981\u6CE8\u610F\u7684\u662F\u5FC5\u987B\u58F0\u660E\u5BB9\u5668\u9AD8\u5EA6\u3002

<div v-for="img in imageList" v-lazy:background-image="img" />

\u7EC4\u4EF6\u61D2\u52A0\u8F7D

\u5C06\u9700\u8981\u61D2\u52A0\u8F7D\u7684\u7EC4\u4EF6\u653E\u5728 lazy-component \u6807\u7B7E\u4E2D\uFF0C\u5373\u53EF\u5B9E\u73B0\u7EC4\u4EF6\u61D2\u52A0\u8F7D\u3002

// \u6CE8\u518C\u65F6\u8BBE\u7F6E\`lazyComponent\`\u9009\u9879
app.use(Lazyload, {
  lazyComponent: true,
});

<lazy-component>
  <img v-for="img in imageList" v-lazy="img" />
</lazy-component>

API

Options

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
loading\u52A0\u8F7D\u65F6\u7684\u56FE\u7247string-
error\u9519\u8BEF\u65F6\u7684\u56FE\u7247string-
preload\u9884\u52A0\u8F7D\u9AD8\u5EA6\u7684\u6BD4\u4F8Bstring-
attempt\u5C1D\u8BD5\u6B21\u6570number3
listenEvents\u76D1\u542C\u7684\u4E8B\u4EF6string[]scroll\u7B49
adapter\u9002\u914D\u5668object-
filter\u56FE\u7247 URL \u8FC7\u6EE4object-
lazyComponent\u662F\u5426\u80FD\u61D2\u52A0\u8F7D\u6A21\u5757booleanfalse

\u66F4\u591A\u5185\u5BB9\u8BF7\u53C2\u7167\uFF1Avue-lazyload \u5B98\u65B9\u6587\u6863

\u5E38\u89C1\u95EE\u9898

\u901A\u8FC7 CDN \u5F15\u5165 Vant \u65F6\uFF0C\u6CA1\u6709\u81EA\u52A8\u6CE8\u518C Lazyload \u7EC4\u4EF6\uFF1F

\u7531\u4E8E Lazyload \u7EC4\u4EF6\u5728\u6CE8\u518C\u65F6\u53EF\u4EE5\u4F20\u5165\u4E00\u4E9B\u914D\u7F6E\u9879\uFF0C\u6240\u4EE5\u6211\u4EEC\u4E0D\u4F1A\u81EA\u52A8\u6CE8\u518C Lazyload \u7EC4\u4EF6\uFF0C\u9700\u8981\u624B\u52A8\u8FDB\u884C\u6CE8\u518C\uFF1A

const app = Vue.createApp();

app.use(vant.Lazyload, {
  lazyComponent: true,
});
`,11),p=[e],h={__name:"README.zh-CN",setup(d,{expose:s}){return s({frontmatter:{}}),(o,i)=>(a(),t("div",l,p))}};export{h as default};