js实现图片加载中效果 loading

关于loading加载的2个插件。

jQuery.lazyload

Echo.js

这两个插件功能都满足不了需求,我们这里只是因为图片加载比较慢,需要一个转圈而已,并不是需要懒加载。

而且,这两个插件也无法设置图片加载后的显示。

自己了写一个

效果展示:

网速太快不太不明显哈哈

http://sunbrightness.gitee.io/csdn-material/img_loading/loading.html

原理:

img标签不使用src进行资源加载。

使用 Image对象获取img标签上的src-data属性,进行加载,判断加载完成后回显。



    
        
        js图片未加载完显示loading效果
       


        
    

    

        
        
        
       

加载失败

 

还有一个有趣的loading素材网站

https://loading.io/

你可能感兴趣的:(前端,Github)