首页  >  文章  >  web前端  >  JS预加载图片的实现

JS预加载图片的实现

小云云
小云云原创
2018-03-26 15:35:191778浏览


本文主要和大家分享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)

相关推荐:

js预加载图片方法汇总_javascript技巧

以上是JS预加载图片的实现的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn