Use the vue-lazyload plug-in to lazily load images in vue-JS Tutorial-php.cn

This article mainly introduces a detailed guide to using the vue-lazyload plug-in to lazily load images in vue. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Detailed guide on using image lazy loading in vue,share with everyone. The details are as follows:

Instructions

When the network request is relatively slow, add a placeholder image with a lower pixel to this image in advance, so as not to Stack them together, or display a large blank space to make the user experience better.

Case

##demo: Lazy loading case demo

Installation Installation method

npm

$ npm i vue-lazyload -D

Copy after login

CDN
##CDN: https://unpkg.com/vue-lazyload/vue -lazyload.js

Copy after login

Usage

main.js in the entry file

import Vue from 'vue' import App from './App.vue' import VueLazyload from 'vue-lazyload' //引入这个懒加载插件 Vue.use(VueLazyload) // 或者添加VueLazyload 选项 Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1 }) new Vue({ el: 'body', components: { App } })

Copy after login

After the entry file is added, you can directly use the img anywhere in the component: src -> v-lazy

Copy after login

Change the :src attribute in the img tag in the previous project to v-lazy

Copy after login

Parameter option description

key description default options preLoad proportion of pre-loading height 1.3 Number error When loading the image fails 'src' String loading When the image is loaded successfully 'src' String attempt Attempt count 3 Number listenEvents Events you want to listen to ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] Desired Listen Events adapter Dynamic modification of element attributes { } Element Adapter filter Image listener or filter { } Image listener filter lazyComponent lazyload component false Lazy Component dispatchEvent Trigger dom event false Boolean throttleWait throttle wait 200 Number observer use IntersectionObserver false Boolean observerOptions IntersectionObserver options { rootMargin: '0px', threshold: 0.1 } IntersectionObserver Events you want to listen for

You can configure the event you want to use vue - lazyload by passing an array

The name of the listener.

Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1, // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend'] listenEvents: [ 'scroll' ] })

Copy after login

This is useful if you have trouble reloading with this plugin

Related recommendations:

Image lazy loading imgLazyLoading.js detailed explanation

How to use IntersectionObserver to implement image lazy loading

Image lazy loading

The above is the detailed content of Use the vue-lazyload plug-in to lazily load images in vue. For more information, please follow other related articles on the PHP Chinese website!