懒加载详解

HuangYH~

于 2024-04-10 18:37:25 发布

阅读量42

点赞数

分类专栏： VUE.js 文章标签：前端

原文链接：https://blog.csdn.net/qq_56918166/article/details/130910669

版权

VUE.js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1、懒加载的介绍

懒加载其实也叫做延迟加载、按需加载，比如在长网页中延迟加载图片数据，是一种比较好的网页性能优化的方法。在比较长的网页或应用中，如果图片有很多，一下子之间把所有的图片都加载出来的话，耗费很多性能，而且用户说不定会把图片一一全部看完。

如果使用图片的懒加载的话，就可以解决上述问题咯，解决方法就是只加载在可视窗口内的部分图片，其余图片都先不加载，之后随着鼠标的滚轮或者滚动条的滚动，到哪了，哪里才会加载图片，通过这种方式，好处也很明显：

（1）网页的加载速度更快

（2）服务器的负载一定程度的减小了

懒加载的使用，一般适用于图片较多，页面列表较长的场景之中。

2、懒加载的特点

减少无用资源的加载：使用懒加载明显减小了服务器的压力，减小了浏览器的负担
提升用户的体验：如果同时加载了很多图片的话，那相对来说，用户的等待的时间也会随之增加，这样就很影响用户的体验，而使用懒加载的话，能明显减小用户的等待时间，大大的提升用户的体验感！
防止加载过多的图片而影响其他资源文件的加载：会影响网站应用的正常使用

3、图片懒加载

图片懒加载的实现原理：

首先我们要明白，图片的加载是怎么产生的？图片的加载是由src属性引起的，当对src赋值时，浏览器就会请求图片资源，根据此特点，我们先用data-load属性来存储图片的路径，在需要加载图片的时候，将data-load 中图片的路径赋值给src，这样就实现了懒加载啦

实现一个懒加载
通过JS 实现一个懒加载：

（1）window.innerHeight 获取浏览器可视区域的高度

（2）document.body.scrollTop || document.documentElement.scrollTop 获取浏览器滚动过的距离

（3）xx.offsetTop 是元素的顶部，距离文档顶部的高度

（4）图片的加载条件： xx.offsetTop < window.innerHeight + document.body.scrollTop (即也就是当图片所在位置，进入到了当前浏览器的可视窗口中去)

<div>
    <img  src ='loading.git'  data-load="xx.png'>
    <img  src ='loading.git'  data-load="xx.png'>
    <img  src ='loading.git'  data-load="xx.png'>
    <img  src ='loading.git'  data-load="xx.png'>
    <img  src ='loading.git'  data-load="xx.png'>
    <img  src ='loading.git'  data-load="xx.png'>
    <img  src ='loading.git'  data-load="xx.png'>
</div>
<script>
        var img =document.querySelectorAll('img')
         function lazyLoad(){
          // 获取 浏览器滚动过的距离
          var scrollTop =  document.body.scrollTop ||   document.documentElement.scrollTop
             //   获取 可视区域的高度
            var winHeight= window.innerHeight
            for( var i=0; i<img.length ; i++){
            if(img[i].offsetTop < scrollTop + winHeight){
                    img[i].src =img[i].getAttribute('data-load')
        }
        }
    }
    window.onscroll =   lazyLoad
</script>

4、路由懒加载

在Vue.js中，你可以使用vue-router的懒加载功能来按需加载页面组件。这种方式通常用于大型应用，其中某些页面可能很大，或者不经常访问。通过懒加载这些页面，可以减少应用的初始加载时间。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes,
  scrollBehavior (to, from, savedPosition) {
    // 这里可以添加滚动行为
  },
  mode: 'history'
})

// 懒加载组件
const FooLazy = () => import('./Foo.vue')
const BarLazy = () => import('./Bar.vue')

// 将懒加载的组件替换到路由定义中
routes[0].component = FooLazy
routes[1].component = BarLazy

// 重新创建router实例以使用新的路由配置
router = new VueRouter({
  routes,
  scrollBehavior (to, from, savedPosition) {
    // 这里可以添加滚动行为
  },
  mode: 'history'
})

export default router

在这个例子中，Foo和Bar组件被替换为返回Promise的函数。当路由被访问时，这些函数才会执行，从而异步加载对应的组件。

5、组件懒加载

除了路由懒加载，你还可以在Vue.js中对单个组件进行懒加载。这可以通过使用v-if指令和动态组件来实现。

<template>
  <div>
    <component v-if="isComponentLoaded" :is="currentComponent"></component>
    <button @click="loadComponent">加载组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isComponentLoaded: false,
      currentComponent: null
    }
  },
  methods: {
    loadComponent() {
      this.isComponentLoaded = false
      this.currentComponent = () => import('./MyLargeComponent.vue').then(MyLargeComponent => {
        this.isComponentLoaded = true
        return MyLargeComponent
      }).catch(error => {
        console.error('懒加载组件失败:', error)
      })
    }
  }
}
</script>

在这个例子中，MyLargeComponent组件在用户点击按钮时才开始加载。v-if指令确保在组件加载完成并设置isComponentLoaded为true之前，不会渲染组件。