首页 > 其他分享 >使用require.context实现优雅的预加载

使用require.context实现优雅的预加载

时间:2023-05-05 16:45:19浏览次数:39  
标签:count .. img require imagesPathArr let context 加载

前言

在前端开发中,对页面花里胡哨度[注1]要求越高的页面,用到的图片、音频什么的就越多,比如什么结婚请柬、展会请柬、发布会宣传页、数据大屏。虽然现在浏览器不允许网页在没有用户交互的情况下播放音频,但是,我们依旧要在页面展现的同时,准备好所有的静态资源。

注1:花里胡哨度(garish degree),又名难做指数,江湖人称领导开心点

丑陋的预加载

预加载即提前加载,浏览器在请求一张图片时,会缓存到本地,在下次请求同样的地址时,会直接在本地缓存读取(304),在本地读取的时间基本可以忽略不计。如果我们能够在图片未加载完成时给用户一个加载进度,提示用户:“急什么,马上完事!”,则能够有效的提升用户体验。

单张预加载

相信同学都了解图片的预加载:

let img = new Image()
img.src = "@/../../xx.png"
img.onload = () => {
	//...
}

这是为大家所熟知的预加载方式,但是这种方法只适用于单张图片的预加载。

那多张怎么做呢?

多张预加载

很简单,我们给图片们定义一个数组就好了

let imagesPathArr = ["@/../../xx.png","@/../../yy.png","..."];

然后我们再用循环去加载这些图片

let count = 0        
for (let item of imagesPathArr) {
          let img = new Image()
          img.src = item
          img.onload = () => {
            count++
            if (count === imagesPathArr.length) {
                // ... 加载完成
    		}
  		}
}

我们甚至可以通过count/imagesPathArr.length算出加载的百分比 。

没错,但是这种方法加载十张图片还可以,那加载一百张呢?

同学说:“我可以把图片从0-99命名,加载时只需要循环一百次就可以了!”

可以,那么假如我们用python写了一个重命名脚本,把这一百张图片从0-99命名完成。

那么我们的代码就长这样:

for(let i = 0;i<=99;i++){
	let img = new Image()
      img.src = `@/../../${i}.png`
      img.onload = () => {
      count++
      if (count === imagesPathArr.length) {
          // ... 加载完成
      }
  	}
}

ok,看起来没有任何问题,实际上也没有任何问题。

但是在使用过程中,我们会发现,图片的格式不一定是统一的(当然你可以将他们转换成统一的),而且这种方式看起来太丑了,一点也不够优雅。

那么有没有一种方式,优雅的预加载呢?有。

优雅的预加载

要实现优雅的预加载,我们要优哪些方面?

  • 第一,我们无需知道加载的图片有多少;
  • 第二,我们无需知道加载的图片叫什么;
  • 第三,我们无需知道图片的格式是什么。

标签:count,..,img,require,imagesPathArr,let,context,加载
From: https://www.cnblogs.com/Kay-Larry/p/17374533.html

相关文章

  • 下拉加载
    需求:当有大量数据时,页面需要滚动条下拉到底部时加载更多当一个列表存在成千上万条,但是又没有分页组件的情况,不能一次性加载大量数据。这个时候就需要滚动条下拉到底部时,再重新加载数据思路pageSize设置为20条或更多,超出页面高度;监听滚动条下滑,需要加一个防抖,当滚动条到达底部......
  • el-select数据太多造成页面卡顿?el-select实现触底加载
    当我们使用el-select下拉框的时候,会遇到后端放回的数据太过庞大(成千上万条),导致页面渲染的时候造成卡顿现象。这时候我们可以利用触底加载方法减少资源的消耗,避免页面卡顿。思路:这时候我们可以利用vue的自定义指令,监听到他的下拉滚动事件,当滚动到最后时,(下拉宽高度+可滑动高度距离......
  • vue搭建脚手架出现:无法加载文件 D:\SoftWare\NodeJS\node_global\vue.ps1
    一、前言用VsCode搭建Vue3脚手架时,提示“无法加载文件D:\SoftWare\NodeJS\node_global\vue.ps1”文件 二、解决方法以管理员身份打开VSCode编辑器首先执行get-ExecutionPolicy查看执行策略然后执行set-ExecutionPolicyRemoteSigned把策略模式改为RemoteSigned更改执行......
  • yarn : 无法加载文件 在此系统上禁止运行脚本
    yarn:无法加载文件C:\Users\Administrator\AppData\Roaming\npm\yarn.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅https:/go.microsoft.com/fwlink/?LinkID=135170中的about_Execution_Policies。所在位置行:1字符:1+yarn--registry=https://registry.npmmirro......
  • Avalonia实现滑动加载
    Avalonia版本V0.10.18privatevoidScrollViewer_OnScrollChanged(object?sender,ScrollChangedEventArgse){varvm=(MainWindowViewModel)DataContext;vart=(ScrollViewer)sender;//Console.WriteLine($"偏移量:{t.O......
  • 【nodejs基础】模块加载机制及npm指令详解03
    1.模块化的基本概念模块化:是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说,模块是可组合、分解和更换的单元编程领域中的模块化,就是遵守固定的规则,把一个大文件拆成独立并互相依赖的多个小模块。把代码进行模块化拆分的好处*提高了代码的复......
  • 关于Android studio的虚拟机Webview出现网页无法加载,显示net::ERR_NAMENOT_RESOLVED的
    一开始出现了这个错误net::ERR_CLEARTEXT_NOT_PERMITTED参考这三个文献,https://www.cnblogs.com/suhq/p/14414882.htmlhttps://blog.csdn.net/qq_59125846/article/details/121953461https://blog.csdn.net/weixin_43169336/article/details/128379580都试了一遍后,问题消失,......
  • JVM类加载机制
    1.类加载的生命周期类的加载过程包括:加载、验证、准备、解析、初始化(解析某些情况下可以在初始化阶段后开始;几个阶段按顺序开始,并非进行或完成,这些阶段通常是互相交叉混合进行。)类的加载机制:虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验、转换解析......
  • 【SpringBoot】【一】 加载初始化器、监听器详解
    1 前言本节主要讲下SpringBoot启动的时候,加载初始化器、监听器的过程哈。2 加载时机我们先来看下加载的时机,也就是什么时候加载的呢,就是我们SpringBoot启动的时候,创建SpringApplication的时候就会去加载的,我们看下:@SpringBootApplicationpublicclassDemoApplicati......
  • Root privileges are required forrunning the Systemback!(转)
    在使用systemback对Linux服务器进行镜像备份时发现无法正常打开,报错显示:RootprivilegesarerequiredforrunningtheSystemback!或者UnsafeWindowauthorization!Pleasedonotuse‘sudo’command.后来发现有两种解决办法:1、获取权限suroot/usr/lib/systemback/sbsustart......