vue-lazyload插件中如何自定义加载中显示的图片

在 vue-lazyload 插件中，可以通过设置 `loading` 属性来自定义加载中显示的图片。具体操作如下：

1. 在 Vue 组件中，引入需要显示的加载中图片：

import loadingImg from "@/assets/loading.gif";

2. 在使用 `Vue.use(VueLazyload)` 注册插件时，传入 `loading` 属性并设置为需要显示的加载中图片即可：

Vue.use(VueLazyload, {
  loading: loadingImg
});

这样，当组件中的图片还未加载完成时，就会显示该自定义的加载中图片。

相关问题

vue-lazyload 再封装自定义图片指令

好的，可以的。

首先，我们需要知道 `vue-lazyload` 是一个 Vue 插件，它提供了一个指令 `v-lazy`，可以用来实现图片懒加载。它的使用方式如下：

<img v-lazy="imgUrl">

其中，`imgUrl` 是图片的地址。当图片进入可视区域时，`v-lazy` 指令会自动将 `img` 标签的 `src` 属性设置为 `imgUrl`，从而实现图片的加载。

接下来，我们可以封装一个自定义指令，来简化 `v-lazy` 的使用。

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  loading: require('@/assets/loading.gif')
})

Vue.directive('lazy', {
  bind: (el, binding) => {
    el.setAttribute('data-src', binding.value)
    el.setAttribute('src', require('@/assets/loading.gif'))
  },
  inserted: el => {
    const observer = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting) {
        const imgSrc = el.getAttribute('data-src')
        el.setAttribute('src', imgSrc)
        observer.disconnect()
      }
    })
    observer.observe(el)
  }
})

上面的代码中，我们使用 `Vue.directive` 方法定义了一个名为 `lazy` 的自定义指令。该指令的作用和 `v-lazy` 相同，用于实现图片的懒加载。

在自定义指令的 `bind` 钩子函数中，我们获取了图片的地址，并将其设置为 `data-src` 属性的值。同时，我们将 `src` 属性的值设置为一个占位图，这里使用了一个 loading 图片。

在自定义指令的 `inserted` 钩子函数中，我们使用了 `IntersectionObserver` API 来观察图片是否进入了可视区域。当图片进入可视区域时，我们将 `src` 属性的值设置为 `data-src` 属性的值，从而实现图片的加载。

最后，我们使用 `Vue.use` 方法将 `vue-lazyload` 插件安装到 Vue 中，并设置了一个全局的 loading 图片。

接下来，在 Vue 模板中，就可以使用我们自定义的指令了：

<img v-lazy="imgUrl">

其中，`imgUrl` 是图片的地址。

希望这个例子能对你有所帮助！

vue-lazyload 图片懒加载

Vue-Lazyload是一个用于图片懒加载的Vue插件。它可以帮助我们解决页面加载过多图片导致的卡顿和性能问题。使用Vue-Lazyload，我们可以延迟加载页面中处于视口外的图片，只有当用户滚动到图片位置时才开始渲染图片。

使用Vue-Lazyload的步骤如下：
1. 首先，在你的项目中安装Vue-Lazyload插件。
2. 在main.js中引入Vue-Lazyload插件。
3. 在使用图片的地方，通过v-lazy指令将图片的src属性绑定到具体的图片地址。这样，在用户滚动到图片位置时，图片才会被加载和显示出来。

通过懒加载，可以有效减少页面加载时间，提升用户体验。特别是在图片较多的页面中，懒加载可以显著降低页面的卡顿现象，提高页面的流畅度。因此，Vue-Lazyload是一个很好的解决方案。

另外，如果你对loading图有自己的需求，你也可以使用自定义的loading图。你可以选择一些常用的loading图库，包括svg和纯css写的loading图，根据自己的喜好进行下载和使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>