JS预加载图片

本文介绍了一种使用JavaScript预加载背景图片的方法,以解决在切换背景图片时出现的短暂空白问题。通过创建屏幕外的图片对象并设置其源地址,可以确保图片预先加载并缓存在浏览器中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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)

发现就算预加载也会有空白期,还是选择老实的去改className了。。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值