小程序图片懒加载

image

https://www.uviewui.com/components/image.html

image.png
https://static.kancloud.cn/wangking/uniapp/1974798

Image 图片

https://uniapp.dcloud.io/component/image.html#image

image.png

pages.json配置

"easycom": {
    "autoscan": true,
    "custom": {
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
      "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
      "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
    }
  },

h5图片懒加载

• https://github.com/hilongjw/vue-lazyload#readme
• 注册

import uView from "uview-ui";
import vueLazyLoad from "vue-lazyload";
Vue.use(uView);
Vue.use(vueLazyLoad);

• 使用

    <img src="https://www.iamwawa.cn/Public/img/logo@2x.png" />
    <u--image
      src="https://cdn.uviewui.com/uview/album/1.jpg"
      :fade="true"
      duration="450"
    />
    <u--image
      src="https://cdn.uviewui.com/uview/album/1.jpg"
      :lazy-load="true"
    />