网页图片加载loading效果实现

简介:

网页加载图片时通常用背景图来显示,这样能确保图片不被拉伸变形。这个时候就需要用到img标签的onload函数来确认图片已经下载成功。实现方法如下:
1、把图片地址绑定到目标元素身上


url即为图片地址,src为div属性
2、用js获取src属性后,new Image();出一个图片,并赋值src地址
var img = new Image();
img.src='';
3、通过onload的函数来判断下载是否完成
img.onload = function () {
                target.style.backgroundImage = `url('${url}')`;
                that.isLoad = true;
            };

完成后 将图片地址赋给目标元素设为背景图即可;
ps:图片只会下载一次

相关文章
|
8月前
|
前端开发 算法
一个有趣的图片加载效果
一个有趣的图片加载效果
68 0
|
Web App开发 移动开发 前端开发
多种方法实现Loading(加载)动画效果
当我们ajax提交一个按钮的时候,给那个按钮来个Loading效果会高端很多,体验也会上升个层次。 既能让用户知道正在提交中,也能防止二次提交,好处多多呢。
多种方法实现Loading(加载)动画效果
|
JavaScript 前端开发
Vue中 iframe 的内容加载慢,实现加载(Loading)效果
Vue中 iframe 的内容加载慢,实现加载(Loading)效果
1302 0
Vue中 iframe 的内容加载慢,实现加载(Loading)效果
|
前端开发
用CSS做一个好看的Loading加载效果
一个好看的吃豆人loading效果
|
前端开发
炫酷的CSS3 loading加载动画,总有一款适合你
炫酷的CSS3 loading加载动画,总有一款适合你
667 0
炫酷的CSS3 loading加载动画,总有一款适合你
超酷Loading进度条
在线演示 本地下载
961 0
|
Web App开发 UED
图片的赖加载(lazyLoad)
图片的赖加载(lazyLoad)
1327 0