@fekit/lazyload

页面滚动时监听指定图片到指定位置时等懒加载，配合 @fekit/inview 可以实现超棒的用户体验!

Catalog

• Demos
• Install
• Example
• Version

Demos

https://plugins.fekit.cn/@fekit/lazyload/#/demo

Install

npm i @fekit/lazyload

or

yarn add @fekit/lazyload

Example

<template>
  <div class="scroll flex-block nt-ms nx-sl" mcui-scroll=":y" ref="demoRef" style="overflow-y: scroll">
    <div class="virtual-home-footer">
      <ul mcui-cards="@a" mcui-row="space mob-24 pad-12 dpc-8">
        <li v-for="(item, idx) in list" :key="idx">
          <div>
            <div mcui-cover="" class="pr">
              <div class="full n-ms b-solid b-line b-xs bg-weak">
                <img class="full lazyload" v-if="item.type === 'img'" src="" :data-src="item.path + '&id' + idx" />
                <iframe class="full lazyload" v-if="item.type === 'web'" src="" :data-src="item.path" frameborder="0"></iframe>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import LazyLoad from '@/npm/src';
import { nextTick } from 'vue';
const list = [
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'web',
    path: 'https://baidu.com',
  },
  {
    type: 'web',
    path: 'https://taobao.com',
  },
];

const ex: any = ref(null);

onMounted(() => {
  nextTick(() => {
    ex.value = new LazyLoad({ el: '.lazyload', area: '.scroll' });
  });
});
</script>

Version

v1.3.3
整理文档

v1.1.0
实现了核心功能