In websites, the use of images is very common, and how to optimize the loading of images has become one of the focuses of developers. One of the important optimizations is lazy loading of images, which means that images in the visible area are only loaded when the user scrolls the web page, and are not loaded in the unscrolled area, thereby reducing the loading pressure of the page and improving the user experience.
When using the Vue framework, you can easily implement lazy loading of images and placeholder images by using the instructions it provides.
npm i vue-lazyload -S
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 // 图片加载的尝试次数 })
where , preLoad specifies the aspect ratio of preloading, for example, if you set it to 1.3, then when the image is preloaded, the width will be 1.3 times the target width; error and loading are the image placeholder images when loading fails and loading respectively; attempt is the number of attempts to load the image.
src
attribute with v-lazy
Command: <img v-lazy="path/to/image.png">
<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>
The above code displays a list of images in a loop on the page, each image uses lazy loading, and at the same time mounted
The hook function specifies the area where lazy loading is enabled as the container
module, so that lazy loading of images can be achieved.
Through the above steps, you can easily achieve the effect of lazy loading of images and placeholder images in Vue, which can greatly reduce the loading pressure of the website and improve the user experience.
The above is the detailed content of How to use Vue to implement lazy loading of images and placeholder images?. For more information, please follow other related articles on the PHP Chinese website!