网页中一般都会有图片加载,但是当遇到图片较大,而网络较慢或者服务器宽带较小时,图片加载就会变慢,加载工程中图片区域会显示空白,用户体验会不太好,这时候在加载时放一个动画,可能会缓解用户等待的焦急情绪,优化用户体验

        

    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效果就需要各位小伙伴们自己按照样式实现了,欢迎小伙伴们留言讨论 觉得好的话可以点个赞偶

Logo

前往低代码交流专区

更多推荐