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

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.