网络图片加载时显示loading

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

        

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