图片懒加载以及数据懒加载

当一个单页面应用加载发送的请求很多时，页面可能会出来的很慢影响用户体验，此时我们就可以对项目进行优化，使用数据懒加载以及图片懒加载优化网络性能。懒加载的原理是当组件对象或者Dom对象出现在可视区域的时候再发送请求，这样可以大大减轻网络压力使得页面加载更快。

1. 图片懒加载

（1）图片懒加载的原理

当一个页面有非常多的图片时，img标签的src属性会向服务器发送大量请求获取图片资源此时就会造成比较大的网络压力。图片懒加载的原理是：开始时，不设置src属性，当图片可见时再给img标签的src属性赋值，去加载图片。此处使用用到了自定义指令配合Vue.use()进行注册。

（2）如何判断元素是可见的

在之前是使用scrollTop、offset、height等来计算可见区域

现在：浏览器有一个内置的api，IntersectionObserver 可以用来监听元素是否可见

但是在开发中，一般使用vueuse库中的 useIntersectionObserver 这个api，使用自定义指令配合app.use做成独立的插件。

这里的数据、图片懒加载均使用到了第三方包@vueuse/core，这是一个功能非常强大的第三方包。以在Vue3项目中的实现举例:

安装@vueuse/core

yarn add @vueuse/core

在src中创建 src/xxx/index.ts

// 自定义指令
import { useIntersectionObserver } from '@vueuse/core'// 默认图片
import defaultImg from '../assets/images/200.png'import { App } from 'vue'
export default {install(app: App) { // 全局指令app.directive('lazy', {// mounted是v3中自定义指令的生命周期，它会被自动调用// 它表示的涵义和组件中的mounted是一致的// el是dom元素，binding:通过binding.value可以取出传来的值mounted(el, binding) {// 设置默认图el.src = defaultImg// console.log('lazy', el, binding.value);// 实时监听el是否可见，如果可见，给他的src设置binding.valueconst {stop} = useIntersectionObserver(el, ([{isIntersecting}]) => {if(isIntersecting) {el.src = binding.value// 停止监听stop()}})// 如果图片加载失败，显示默认的图片el.onerror = () => {el.src =  defaultImg}}})}
}

在main.ts中注册

import { createApp } from 'vue'
import App from './App.vue'
import xxx from '@/xxx/index'createApp(App).use(xxx).mount('#app')

2. 数据懒加载

场景：当主页又很多个模块，每个模块都发ajax请求拿数据，并且是在组件创建时发送请求，这样有一个后果：靠近底层的模块其实用户看不到，这个发请求有点浪费。

思路：判断当前模块是否可见，可见就发送请求。

做法：封装一个自定义的组件，接受一个回调，返回一个ref，这个ref可以用在模块的外层dom上：当这个ref引用的dom可见时，就执行这个回调（发请求）

实操：使用vueuse中的useIntersectionObserver方法去封装。（react生态中，有一个和vueuse类似的库：ahooks）

给组件对象或Dom对象添加ref属性

<demo ref='target'><demo>

封装组件以便服用

import { useIntersectionObserver } from '@vueuse/core';
import { onMounted, ref } from 'vue';// 接收一个回调函数，返回一个ref引用
// 功能：当ref引用的dom处于可见状态时，调用一次回调函数
export function useLazyDate( fn:() => void ) {// 当整个区块处于可见状态时，才发ajaxconst target = ref(null)onMounted(() => {const {stop} = useIntersectionObserver(target.value, ([{isIntersecting}]) => {if(isIntersecting) {fn()// 停止监听stop()}})})return target
}

图片懒加载以及数据懒加载相关推荐

Cesium开发基础笔记总结（加载影像、加载地形数据、加载矢量）
Cesium开发基础笔记总结学习总结于GIS李胜老师博客 Cesium开发基础01加载影像数据加载影像数据 Cesium中的影像图层类: 无论是二维地图还是三维地图,如果缺少了底图影像或电子地图, ...
cesium采用primitive方式加载geojson数据
cesium采用primitive方式加载geojson数据 cesium加载geojson数据有自带的接口GeoJsonDataSource和演示示例,使用的是entity方式来加载数据,而ent ...
ArcGIS Runtime SDK for .Net 100.6 如何加载本地数据
由于ArcGIS Engine的32位.部署繁重.不适应新一代Web GIS的发展等缺点,Esri推出了ArcGIS Runtime产品,该产品因其64位.部署轻便.跨平台.更好地适应新一代Web G ...
数据懒加载和图片懒加载
数据懒加载是项目优化的一种类型主要是监听, 监听的 DOM 元素是否有进入可视区进入了可视区就可以做一些事情, 如: 发送请求, 返回出数据离开可视区停止对 DOM 元素的监听首先我们使用的是 ...
使用 el-table 实现树形数据懒加载、点击行展开、每次只展示一条数据（大类）以及自定义表格合计值
1. 使用 el-table 实现树形数据懒加载实现必需条件: lazy :load="loadNode" :tree-props="{ children: 'chil ...
android预加载布局,Android 懒加载优化
目录介绍 1.什么是懒加载 1.1 什么是预加载 1.2 懒加载介绍 1.3 懒加载概括 2.实际应用中有哪些懒加载案例 2.1 ViewPager+Fragment组合 2.2 分析源码 3.Vie ...
el-select下拉加载（实现懒加载）自定义loadmore事件
el-select下拉加载(实现懒加载)自定义loadmore事件使用场景:下拉框远程搜索数据量较大,导致dom渲染很慢,所以远程搜索要采用分页的形式,故自定义事件,实现滚动加载,具体如下: 1.自 ...
c++读取图片_Pytorch读取，加载图像数据(一)
Pytorch读取,加载图像数据(一) 在学习Pytorch的时候,先学会如何正确创建或者加载数据,至关重要. 有了数据,很多函数,操作的效果就变得很直观. 本文主要用其他库读取图像文件(学会这个,你 ...
layui信息加载流的方式加载数据
SSM项目中使用layui信息加载流的方式加载数据这里首先jsp页面来一个div容器,这里数数据显示的地方 //css样式: <style type="text/css"& ...

图片懒加载以及数据懒加载

1. 图片懒加载

（1）图片懒加载的原理

（2）如何判断元素是可见的

2. 数据懒加载

图片懒加载以及数据懒加载相关推荐

最新文章

热门文章