This is the 16th day of my participation in the August Text Challenge.More challenges in August !

define

Images are loaded lazily or only when certain conditions are met

The principle of

When the image is not in the viewable area, do not giveSRC, so the browser won’t send the request until the image is visible

purpose

Reduce the number of unnecessary or delayed database accesses, since each database access is time consuming and is created only when the object’s data is actually used. The main purpose of lazy loading is to serve as a front-end optimization for the server, reducing the number of requests or delayed requests

Advantages of lazy loading

  1. Can reduce the number of first page load, reduce the pressure on the server
  2. When the network request is slow, add a placeholder image with low pixel to this image in advance to improve the user experience

Using the scenario

If a page needs a lot of pictures to load, the page will become very slow. At this time, if only the pictures in the visual area are loaded, other pictures can have a placeholder loading map temporarily, and then request the real pictures and replace them when they are rolled to the visual area

How to use it in VUE

Use the vue-lazyload plug-in

(1) Install the plug-in

npm install vue-lazyload --save-dev
Copy the code

(2) Import and use in the entry file man.js

Import VueLazyload from 'vue-lazyLoad' and then use it directly in vueCopy the code

Vue.use(VueLazyload)

Or add custom options

Use (VueLazyload, {preLoad: 1.3, error: 'dist/error. PNG ',// Loading: 'dist/ load. GIF ',// Preloading: 1})Copy the code

Vue-lazyload API details are as follows:

key description default options
preLoad Proportion of pre-loading height 1.3 Number
error SRC of the image upon load fail 'data-src' String
loading SRC of the image while loading 'data-src' String
attempt Attempts count (number of images attempted to load) 3 Number
listenEvents Events that you want vue listen for by default [‘scroll’] can be omitted, and other options can be used if the plugin conflicts with events such as animations or transitions in the page [' insensitive '(the default), ` `' wheel '` `' mousewheel, ` ` 'resize, ` `' animationend, ` ` 'transitionend, ` `' touchmove '] Desired Listen Events
adapter Dynamically modify the attribute of element {} Element Adapter
filter The image’s Listener filter {} Image listener filter
lazyComponent lazyload component false Lazy Component
dispatchEvent trigger the dom event false Boolean
throttleWait throttle wait 200 Number
observer use IntersectionObserver false Boolean
observerOptions IntersectionObserver options {rootMargin: ‘0px’, threshold: 0.1} IntersectionObserver