JavaScript前端静态资源预加载实现示例

为什么要静态资源预加载？

静态资源文件主要指的就是图片，我们在项目中用到最多的静态资源文件也是图片。但是图片作为一种可替换元素，在使用时有很多的问题。

在了解图片问题之前，先看看发生在我身上的真实小故事，帮助大家更好的理解。

在一个阳光明媚的清晨，你因为各种原因出门晚了。你一路飞奔找到最近的小蓝车，途中完成wifi切换流量、打开支付宝、点击哈罗等操作。看着进入小程序的loading，你知道今天又能挤上地铁，嘴角不禁微微上扬。

在loading消失的最后一秒你也刚好气喘吁吁的跑到了小蓝车面前，迫不及待的点击"扫一扫"三个大字...

就在你手指将要触碰到屏幕的那一瞬间，页面突然一闪，原来扫一扫的位置变成了去购买。下一秒页面不出意外的跳转到了优惠活动页，重新开始了loading...

待你点击返回扫开小蓝，红绿灯已经由黄转红，今天铁定是迟到了...

相信每天踩着最后一秒打卡的朋友一定很理解我的心路历程