1. Role
In more pictures of page, page load performance is poor. Use picture lazy loading can make pictures appear in the viewable area again to load, thereby improving the user experience.
2. Principle
Setting the src attribute of the img tag is empty or unified image path (such as loading in style), scroll the page to listen, when pictures appear in the visible region and re-assigned to src.
3. To achieve
In vue project, you can use the vue vue-lazyload plug.
- Plug: npm install vue-lazyload --save-dev
- Introducing widget: Import VueLazyload from 'VUE-lazyload'
- Use plug-ins: Vue.use (VueLazyload)
- Modify the image displayed: < IMG V-the lazy = "/public/images/a.jpg /">
- Plug-in configuration items:
