A Brief Introduction to the detailed guide on using the image lazyload plug-in vue to load vue-lazyload,

A Brief Introduction to the detailed guide on using the image lazyload plug-in vue to load vue-lazyload,

Detailed guide on lazy image loading in vue,Share with you. The details are as follows:

Description

When the network request is slow, add a low-pixel placeholder image to the image in advance, so that the image is not stacked in one area, or a large blank area is displayed, so that the user experience is better.

Usage

Use vue-lazyload plug-in of vue

Plug-in address: https://www.npmjs.com/package/vue-lazyload

Case

Demo: lazy loading case demo

Installation Method

Npm

$ npm i vue-lazyload -D

CDN

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

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script><script> Vue.use(VueLazyload) ...</script>

Usage

Main. js in the entry file

Import Vue from 'vue 'import App from '. /App. vue 'import VueLazyload from 'vue-lazyload' // introduce this lazy loading plug-in vue. use (VueLazyload) // or add the VueLazyload option Vue. use (VueLazyload, {preLoad: 1.3, error: 'dist/error.png ', loading: 'dist/loading.gif', attempt: 1}) new Vue ({el: 'body ', components: {App }})

After adding the entry file, you can directly use the: src-> v-lazy

 <div class="pic">  <a href="#" rel="external nofollow" rel="external nofollow" ></a></div>

Change the src attribute in the img label of the previous project to v-lazy.

 <div class="pic">  <a href="#" rel="external nofollow" rel="external nofollow" ></a></div>

Parameter options

Key	Description	Default	Options
PreLoad	Proportion of pre-loading height	1.3	Number
Error	When image loading fails	'Data-src'	String
Loading	When the image is loaded successfully	'Data-src'	String
Attempt	Try to count	3	Number
ListenEvents	Event to be monitored	['Scroll ', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove ']	Desired Listen Events
Adapter	Modify element attributes dynamically	{}	Element Adapter
Filter	Image Monitoring or filter	{}	Image listener filter
LazyComponent	Lazyload component	False	Lazy Component
DispatchEvent	Trigger dom events	False	Boolean
ThrottleWait	Throttle wait	200	Number
Observer	Use IntersectionObserver	False	Boolean
ObserverOptions	IntersectionObserver options	{RootMargin: '0px ', threshold: 0.1}	IntersectionObserver

Event to be monitored

You can configure the event 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' ]})

This is useful if you have trouble resetting and loading the plug-in.

When you have some animations and transitions.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.