本文主要和大家分享JS预加载图片的实现,希望能帮助到大家。
需求:项目中点击按钮,实现切换背景图功能。
问题:在切换css的background-image属性时,先加载图片后显示,会出现一瞬空白期。
解决方法:提前预加载背景图
首先利用Image()构造函数来创建一个屏幕外图片对象,之后将该对象的src属性设置URL,由于图片元素并没有添加到文档中,因此它是不可见的,但是浏览器还是会加载图片并将其缓存起来。
function preloadImg(url){ var imageObj = new Image() imageObj.src=url }var aImgUrlList = ['image1.png', 'image2.png']for (var i of aImgUrlList) preloadImg(i)