A brief discussion on the detailed guide to using pictures in vue to lazy load vue-lazyload plug-in

Detailed Guide to Using Images in Vue，Share with everyone. The details are as follows:

illustrate

When network requests are slower, add a low-pixel placeholder image to this image in advance so that it will not be stacked on one piece or display a large blank space, so that the user experience will be better.

How to use

vue-lazyload plugin using vue

Plugin address:/package/vue-lazyload

Case

demo： Lazy load case demo

Installation installation method

npm

$ npm i vue-lazyload -D

CDN

CDN: /vue-lazyload/

<script src="/vue-lazyload/"></script>
<script>
 (VueLazyload)
 ...
</script>

usage

In the entry file

import Vue from 'vue'
import App from './'
import VueLazyload from 'vue-lazyload' //Introduce this lazy loading plugin
(VueLazyload)

// Or add VueLazyload option(VueLazyload, {
 preLoad: 1.3,
 error: 'dist/',
 loading: 'dist/',
 attempt: 1
})

new Vue({
 el: 'body',
 components: {
  App
 }
})

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

 <div class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img :src="'/static/img/' + " alt=""></a>
</div>

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

 <div class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img v-lazy="'/static/img/' + " alt=""></a>
</div>

Parameter Option Description

key	description	default	options
preLoad	proportion of pre-loading height	1.3	Number
error	When loading the image fails	'data-src'	String
loading	When the image is loaded successfully	'data-src'	String
attempt	Try counting	3	Number
listenEvents	Events you want to listen to	['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']	Desired Listen Events
adapter	Dynamically modify element properties	{ }	Element Adapter
filter	Image monitoring 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 to

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

The name of the listener.

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

This is useful if you are having trouble resetting this plugin to load

When you have certain animations and transitions.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.