网络图片加载时显示loading
网页中一般都会有图片加载,但是当遇到图片较大,而网络较慢或者服务器宽带较小时,图片加载就会变慢,加载工程中图片区域会显示空白,用户体验会不太好,这时候在加载时放一个动画,可能会缓解用户等待的焦急情绪,优化用户体验1,获取到图片元素 我这里是用的vue书写的代码 所以是使用的 ref 来获取元素的 也可以用js的其他方法获取到元素,如id class 等(通过id获取 使用js :document.
网页中一般都会有图片加载,但是当遇到图片较大,而网络较慢或者服务器宽带较小时,图片加载就会变慢,加载工程中图片区域会显示空白,用户体验会不太好,这时候在加载时放一个动画,可能会缓解用户等待的焦急情绪,优化用户体验
1,获取到图片元素 我这里是用的vue书写的代码 所以是使用的 ref 来获取元素的 也可以用js的其他方法获取到元素,如id class 等(通过id获取 使用js : document.getElementById('loadingImg') )
2,通过js方法控制元素的显示隐藏 (通过loading方法)
// 首先获取到img元素
let loadingImg = this.$refs.loadingImg;
// 使用loading方法
loadingImg.onload = () => {
// 图片加载完成之后调用方法显示图片
this.loadingComplate = true
};
这里只介绍了监控图片加载是否完成的方法 至于图片加载时的loading效果就需要各位小伙伴们自己按照样式实现了,欢迎小伙伴们留言讨论 觉得好的话可以点个赞偶
更多推荐
所有评论(0)