vue实现图片加载完成前的loading组件方法

前端之家收集整理的这篇文章主要介绍了vue实现图片加载完成前的loading组件方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

如下所示:

以下为纯js代码

<Meta charset="UTF-8"> loading

window.onload = () => { var img = document.querySelector('#img'); img.src = 'http://www.86y.org/images/loading.gif'; // 先加载loading.gif var newImg = new Image(); newImg.src = 'https://avatars3.githubusercontent.com/u/1?v=3'; newImg.onerror = () =>

{ // 图片加载错误时的替换图片 newImg.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489486509807&di=22213343ba71ad6436b561b5df999ff7&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F77%2F31%2F20300542906611142174319458811.jpg'; } newImg.onload = () => { // 图片加载成功后把地址给原来的img img.src = newImg.src } }

以上这篇vue实现图片加载完成前的loading组件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/33858.html

猜你在找的Vue相关文章