vue中图片懒加载js代码

Vue中可以使用第三方库vue-lazyload实现图片懒加载。具体步骤如下：

1. 安装vue-lazyload库

npm install vue-lazyload --save

2. 在main.js中引入vue-lazyload库并配置

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载的高度比例
  error: 'dist/error.png', // 图片加载失败时显示的图片
  loading: 'dist/loading.gif', // 图片加载时显示的图片
  attempt: 1 // 加载图片的尝试次数
})

new Vue({
  el: '#app',
  render: h => h(App)
})

3. 在template中使用v-lazy指令

<template>
  <div>
    <img v-lazy="imgUrl" />
  </div>
</template>

这样就可以实现图片懒加载了。当图片进入可视区域时，才会开始加载图片。

相关问题

vue轮播图图片懒加载

Vue轮播图图片懒加载可以通过使用vue-lazyload插件来实现。以下是具体的步骤：

1. 首先，安装vue-lazyload插件。可以使用npm或者yarn命令来安装：

npm install vue-lazyload

2. 在Vue项目的入口文件（通常是main.js）中导入并使用vue-lazyload插件：

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

Vue.use(VueLazyload)

3. 在需要懒加载的轮播图组件中，将需要懒加载的图片的src属性替换为v-lazy指令，并设置默认图片：

<template>
  <div>
    <img v-for="image in images" :key="image.id" :src="image.src" v-lazy="image.src" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { id: 1, src: require('@/assets/image1.jpg') },
        { id: 2, src: require('@/assets/image2.jpg') },
        { id: 3, src: require('@/assets/image3.jpg') },
        // ...
      ]
    }
  }
}
</script>

在上述代码中，v-lazy指令将会根据滚动位置动态加载相应的图片，从而实现图片懒加载效果。

请注意，上述代码中的图片路径使用了require函数来获取图片资源，你需要根据你的项目结构和图片路径进行相应的修改。

这样，你就可以使用vue-lazyload插件实现Vue轮播图图片的懒加载了。

用vue 写原生图片懒加载

实现原生图片懒加载，可以借助 Vue.js 的指令来完成。下面是一个使用 Vue.js 实现图片懒加载的示例代码：

1. 在 Vue.js 中注册一个指令：

Vue.directive('lazyload', {
  inserted: function (el) {
    let img = new Image();
    img.src = el.dataset.src;
    img.onload = function () {
      el.src = el.dataset.src;
    };
  }
});

2. 在 HTML 中使用该指令：

<img v-lazyload data-src="image.jpg" />

这样，当 img 元素进入可视区域时，就会触发指令中的 inserted 钩子函数，从而加载真正的图片。