1. Analysis of the concept of lazy loading
Simply put, lazy loading (also known as lazy loading) refers to a technical strategy that only takes resource loading when actual requirements appear.
Specifically, when the content or resources are not yet within the user's current visual area or interaction range, they are not loaded immediately, but are loaded when the user is about to access or needs these resources.
2. Summary of the advantages of lazy loading
- Reduce the load burden of home page for the first time: By loading only the necessary resources in the visual area, the number of requests and data transmissions during page initialization can be significantly reduced, thereby effectively reducing server pressure.
- Improve user experience: In the case of poor network environment, replacing the pictures to be loaded with low-resolution placeholder images in advance can avoid the page layout being messy due to blank or stacking during the image loading process, improving visual fluency and comfort.
3. Reasons for lazy loading
Imagine a web page with a large number of images. Without using lazy loading technology, all images loading simultaneously may cause extremely slow page response speed and affect user experience.
With the help of lazy loading scheme, only pictures in the visual area are loaded in the initial state, and the other pictures are displayed with preset loading pictures. When the picture scrolls to the visual area, the request and loading of the real picture is triggered, which can greatly improve the page performance and fluency.
A popular plugin in the ecosystem, vue-lazyload, is designed to solve such problems.
4. Overview of the working principle of lazy loading
The core of lazy loading is to control the actual request timing of the browser for image resources.
It is usually done to first fill all image elements with a unified placeholder and store the real image address in a custom attribute such as "data-url".
When an image element enters the viewable window, JavaScript will listen to this event and assign the "data-url" attribute value of the element to the src attribute, which triggers the browser to issue a real image loading request to achieve lazy loading effect.
vue2 realizes lazy loading of images
Introducing Vue-Lazyload
- npm install vue-lazyload --save
// documentimport VueLazyload from 'vue-lazyload'
// (VueLazyload) //No configuration item// Configuration Itemsconst loadimage = require('@/assets/img/')
const errorimage = require('@/assets/img/')
(VueLazyload, {
preLoad: 1.3, //Preloaded aspect ratio loading: loadimage, //The picture displayed in the picture loading state error: errorimage, //The picture displayed when the picture fails to load attempt: 1, // Maximum number of attempts after loading error})use
<img v-lazy="imgData"/>
data() {
return {
imgData: 'Picture Address'
}
}vue3 realizes lazy loading of images
Introducing vue3-lazy
- npm install vue3-lazy --save
// documentimport lazyPlugin from 'vue3-lazy';
import errImg from "@/assets/img/";
import loadImg from "@/assets/img/";
// Configuration ItemscreateApp(App).use(lazyPlugin, {
error: errImg,// The wrong picture is loaded loading: loadImg, // Pictures when loading})use
Use the same vue2
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.