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了。。。

Vue.js 预加载图片通常是为了提升用户体验,特别是在页面滚动或组件加载时,可以先预加载相关的背景图片或占位图,等实际显示时图像已经准备好,减少用户的等待时间。在 Vue 中,你可以通过一些技巧来实现这个功能: 1. **使用 `v-if` 或 `v-show`**:对于懒加载图片,可以在元素上设置 `v-if="isLoaded"`,一开始将 `isLoaded` 设置为 `false`,当图片加载完成后再将其改为 `true`。 ```html <img :src="lazySrc" v-if="!isLoaded" :alt="description"> ``` ```javascript data() { return { lazySrc: 'placeholder.jpg', isLoaded: false, description: '图片描述' } }, methods: { loadImage() { const img = new Image(); img.src = this.lazySrc; img.onload = () => { this.isLoaded = true; }; } } ``` 然后,在需要的地方触发 `loadImage()` 函数。 2. **使用第三方库**:如 `vue-lazyload`、`vue-image-loading` 等插件,它们提供了更方便的 API 优化处理,比如错误处理性能优化。 安装示例: ```bash npm install vue-lazyload ``` 应用到组件: ```html <vue-lazy-img :src="lazySrc" placeholder-src="placeholder.jpg" @load="onLoad"></vue-lazy-img> ``` 3. **使用 `<img>` 标签的 `srcset` `sizes` 属性**:现代浏览器支持这些属性来智能地选择最合适的图片资源,可以在图片加载前提供替代内容。 ```html <img src="small.jpg" srcset="large.jpg 2x, medium.jpg 1.5x" sizes="(min-width: 768px) 100%, 50vw" alt="图片描述"> ``` 这会在屏幕宽度大于768px时加载大尺寸图片,否则显示小尺寸版本。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值