JavaScript判断图片(img)或背景图(background-image)加载完成

var myimg = new Image();
myimg.src = "images/bg7.jpg";
var myinterval = null;

myfun01()
myinterval = setInterval(myfun01, 1)

function myfun01()
{
    if(myimg.complete)
	{
	    clearInterval(myinterval);
            alert('加载完毕');
	}
}

第一步 new Image对象

第二步 设置 Image对象的src属性为加载的 图片 或者 元素的背景图 的url

第三步 (可选设置计时器)一旦 Image对象的complete属性为true时,既图片加载完毕

### UniApp 小程序中使用本地图片作为 `background-image` 的方法 在 UniApp 开发的小程序中,要将本地图片设置为背景图,可以采用如下几种方式: #### 方式一:通过相对路径引用资源文件夹中的图片 如果项目中有名为 `static/images/background.jpg` 的图片,则可以在页面样式部分这样定义背景图像[^1]: ```css page { background-image: url('/static/images/background.jpg'); background-size: cover; } ``` 这种方式适用于静态资源已经放置于项目的特定目录下,并且该位置不会随着构建过程而改变的情况。 #### 方式二:利用 base64 编码内联图片数据 对于较小尺寸的图标类图形素材,可以直接将其转换成 Base64 字符串并嵌入到 CSS 者 HTML 中。例如: ```html <view class="bg-base64"></view> ``` ```css .bg-base64{ width: 100%; height: 300px; /* 设置高度 */ background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...');/* 这里省略了base64编码后的字符串*/ } ``` 不过需要注意的是,这种方法会增加HTML文档大小,因此只适合处理体积很小的图片。 #### 方式三:动态加载网络本地存储内的图片 当需要根据实际情况来决定显示哪张图片时(比如用户上传的照片),可以通过 JavaScript 动态修改元素样式的 backgroundImage 属性实现。假设有一个保存着图片地址变量 imgSrc ,那么就可以这样做: ```javascript this.$nextTick(() => { this.$refs.background.style.backgroundImage = 'url('+imgSrc+')'; }); ``` 同时,在模板里面给定一个 ref 名字以便后续操作 DOM : ```html <view :ref="'background'" style="width:100%;height:200px;"></view> ``` 以上就是在 UniApp 小程序环境中应用本地图片作为背景的方法介绍。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值