如何实现图片预加载,html图片预加载
由于公司业务需要，vue制作的网页需要连接智能家居的wifi。但是这个wifi是不联网的，只用于手机和家里的对接。这样网页就无法在这种wifi下加载服务器上的图片。
对此，我想拿出vue单页系统的三种方案。
1.先加载上一页的图片，缓存，然后在后面断开连接的页面就可以得到了。
2.制作一个页面，将路由容器放在顶部，将断开连接的页面和所有需要显示的图片放在底部。这样页面加载的时候，所有的图片都会出来，最上面的子路由自然也能得到图片。
3.将图片转换为base64数据，并保存在localStorage中。
第一和第二种方案相对简单，在pc和Android平台上表现良好。但是，在ios上并不显示。
(明明图片在最下面，反正上面的不显示)
所以推测ios系统浏览器加载图片是胡萝卜加坑。在加载每张图片之前，我们会嗅一下它是否在服务器上。如果它存在并且没有更改，它将显示在缓存中。如果它没找到，我们就直接去404。因此，当网络断开时，基于浏览器的缓存策略并不理想。需要使用第三种方案。首先粘贴代码：
/*获取图片的base64代码* @ param { obj } img image DOM object * */functiongetbase 64 image(img){ let canvas=document . createelement( canvas )；画布.宽度=img .宽度；canvas . height=img . height；let CTX=canvas . get context( 2d )；ctx.drawImage(img，0，0，img.width，img . height)；//绘制相同图片返回canvas . toda taurl( image/png )；//转换成base64数据}使用canvas很容易将图片转换成base64格式。之后，只需将其保存在sessionStorage中。当图像再次显示时，只需将img的src属性设置为base64 data即可。我在vue项目中的做法是创建一个转换保存base64的组件，将slot中的图片全部转换为base64，并为img标签创建name属性作为keysessionStorage创建另一个组件作为显示组件(只包含一个img标签)，将它的name属性设置为与其对应图片的name属性相同，用它作为key来取sessionStorage的base64数据。
并保存组件：
！-需要预加载的图像-save-img-base64img src=././assets/img/connect/bind _ xiaofang . png name= bind _小芳/img src=./.assets/img/connect/bind _ allon pro . png name= bind _ allon pro /img src=././assets/img/connect/bind _ S20 . png name= bind _ S20 /img src=././assets/img/connect/bind _ S30 . png name= bind _ S30 /img src=././assets/img/connect/connect start _ xiaofang . png name= connect start _小芳/img src=././assets/img/connect/connect start _ allon pro . png name= connect start _ allon pro /img src=././assets/img/connect/connect start _ S20 . png name= connect start _ S20 /img src=././assets/img/connect/connect start _ S30 . png name= connect start _ S30 /img src=././assets/img/connect/reset _ xiaofang . png name= reset _小芳/img src=././assets/img/connect/reset _ allon pro . png name= reset _ allon pro /img src=././assets/img/connect/reset _ S20 . png name= reset _ S20 /img src=././assets/img/connect/reset _ S30 . png name= reset _ S30 /img src=././assets/img/connect/Network _ set . png name= Network _ set /img src=././assets/img/connect/phone _ wifi . png name= phone _ wifi /img src=././assets/img/connect/tmall.png 名称
img-base64 name= network _ set /img-base64浏览器会话存储情况：
从Can I use的表格可以看出，现代的手机浏览器基本都兼容canvas，你可以放心使用。
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。