vue图片加载完成前增加loading效果

小灰灰 2022-02-04 14:27 984阅读 0赞

这次给大家带来vue[图片][Link 1]加载完成前增加loading效果，vue图片加载完成前增加loading效果的[注意事项][Link 2]有哪些，下面就是实战案例，一起来看一下。

**如下所示：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 </td> 
 <td> <code>&lt;template&gt;</code> <code>&nbsp;</code><code>&lt;img :src=</code><code>"url"</code><code>&gt;</code> <code>&lt;/template&gt;</code> <code>&lt;script&gt;</code> <code>&nbsp;</code><code>export </code><code>default</code> <code>{ </code> <code>&nbsp;&nbsp;</code><code>props: [</code><code>'src'</code><code>], </code><code>// 父组件传过来所需的url</code> <code>&nbsp;&nbsp;</code><code>data() { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>url: </code><code>'http://www.86y.org/images/loading.gif'</code> <code>// 先加载loading.gif</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;</code><code>mounted() { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>newImg = </code><code>new</code> <code>Image()</code> <code>&nbsp;&nbsp;&nbsp;</code><code>newImg.src = this.src</code> <code>&nbsp;&nbsp;&nbsp;</code><code>newImg.onerror = () =&gt; { </code><code>// 图片加载错误时的替换图片</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>newImg.src = </code><code>'https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1489486509807&amp;di=22213343ba71ad6436b561b5df999ff7&amp;imgtype=0&amp;src=http%3A%2F%2Fa0.att.hudong.com%2F77%2F31%2F20300542906611142174319458811.jpg'</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;</code><code>newImg.onload = () =&gt; { </code><code>// 图片加载成功后把地址给原来的img</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.url = newImg.src</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>}</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**以下为纯js代码**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 </td> 
 <td> <code>&lt;!DOCTYPE html&gt;</code> <code>&lt;html lang=</code><code>"en"</code><code>&gt;</code> <code>&lt;head&gt;</code> <code>&nbsp;</code><code>&lt;meta charset=</code><code>"UTF-8"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;title&gt;loading&lt;/title&gt;</code> <code>&lt;/head&gt;</code> <code>&lt;body&gt;</code> <code>&nbsp;</code><code>&lt;img id=</code><code>"img"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;script&gt;</code> <code>&nbsp;&nbsp;</code><code>window.onload = () =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>img = document.querySelector(</code><code>'#img'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;</code><code>img.src = </code><code>'http://www.86y.org/images/loading.gif'</code><code>; // 先加载loading.gif</code> <code>&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>newImg = </code><code>new</code> <code>Image();</code> <code>&nbsp;&nbsp;&nbsp;</code><code>newImg.src = </code><code>'https://avatars3.githubusercontent.com/u/1?v=3'</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>newImg.onerror = () =&gt; { </code><code>// 图片加载错误时的替换图片</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>newImg.src = </code><code>'https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1489486509807&amp;di=22213343ba71ad6436b561b5df999ff7&amp;imgtype=0&amp;src=http%3A%2F%2Fa0.att.hudong.com%2F77%2F31%2F20300542906611142174319458811.jpg'</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;</code><code>newImg.onload = () =&gt; { </code><code>// 图片加载成功后把地址给原来的img</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>img.src = newImg.src</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>&lt;/script&gt;</code> <code>&lt;/body&gt;</code> <code>&lt;/html&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

[Link 1]: http://www.php.cn/css/css-rwd-images.html
[Link 2]: http://www.php.cn/code/10182.html