Bagaimana untuk menggunakan Vue untuk melaksanakan pemuatan malas imej dan imej pemegang tempat?

Dalam laman web, penggunaan imej adalah sangat biasa, dan cara mengoptimumkan pemuatan imej telah menjadi salah satu tumpuan pembangun. Salah satu pengoptimuman yang penting ialah memuatkan imej yang malas, yang bermaksud bahawa imej dalam kawasan yang boleh dilihat hanya dimuatkan apabila pengguna menatal halaman web, dan tidak dimuatkan di kawasan yang tidak ditatal, dengan itu mengurangkan tekanan pemuatan halaman dan meningkatkan pengalaman pengguna.

Apabila menggunakan rangka kerja Vue, anda boleh melaksanakan pemuatan malas imej dan imej pemegang tempat dengan mudah dengan menggunakan arahan yang diberikannya.

1. Untuk pelaksanaan pemuatan malas imej, kita boleh menggunakan perpustakaan Vue-lazyload. Mula-mula, anda perlu memasang pustaka menggunakan npm:

npm i vue-lazyload -S

2. Perkenalkan perpustakaan ke dalam fail masukan Vue main.js dan konfigurasikannya:

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

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载的宽高比，默认为 1，即 PhotoShop 中的 1:1
  error: 'path/to/error.png', // 当加载图片失败时的占位图
  loading: 'path/to/loading.gif', // 加载中时的占位图
  attempt: 1 // 图片加载的尝试次数
})

Antaranya, praMuat menentukan nisbah aspek pramuat, contohnya, jika anda Tetapkan hingga 1.3, maka apabila imej telah dimuatkan, lebarnya akan menjadi 1.3 kali lebar sasaran dan ralat memuatkan imej pemegang tempat apabila memuatkan gagal dan cubaan memuatkan adalah bilangan percubaan untuk memuatkan imej.

3. Dalam kedudukan imej yang perlu dimuatkan dengan malas, gantikan atribut src dengan arahan v-lazy: src 属性替换为 v-lazy 指令：

<img v-lazy="path/to/image.png">

4. 在页面中指定需要启用懒加载的区域：

<template>
  <div class="container">
    <div class="item" v-for="item in list">
      <img v-lazy="item.src"> <!-- 图片使用懒加载 -->
      <p>{{ item.text }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          src: 'path/to/image-1.png',
          text: '图片 1'
        },
        {
          src: 'path/to/image-2.png',
          text: '图片 2'
        },
        {
          src: 'path/to/image-3.png',
          text: '图片 3'
        }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 启用懒加载
      this.$lazyload(this.$refs.container)
    })
  }
}
</script>

上述代码在页面中循环展示一个图片列表，每个图片都使用了懒加载，同时在 mounted 钩子函数中指定启用懒加载的区域为 container

rrreee

dalam halaman Tentukan kawasan di mana pemuatan malas perlu didayakan:
5. rrreee
Kod di atas bergelung untuk memaparkan senarai imej pada halaman, setiap imej menggunakan pemuatan malas, dan pada masa yang sama, nyatakan kawasan di mana pemuatan malas didayakan dalam fungsi cangkuk dipasang Kawasan tersebut ialah modul bekas, supaya pemuatan malas imej boleh dicapai.
🎜 Berkenaan penghasilan imej pemegang tempat, anda boleh menggunakan alatan atau alatan dalam talian seperti PhotoShop untuk mencipta imej pemegang tempat yang sesuai dengan gaya tapak web anda. 🎜🎜🎜Melalui langkah di atas, anda boleh dengan mudah mencapai kesan pemuatan malas imej dan imej pemegang tempat dalam Vue, yang boleh mengurangkan tekanan pemuatan tapak web dengan banyak dan meningkatkan pengalaman pengguna. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk melaksanakan pemuatan malas imej dan imej pemegang tempat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!