如下所示:
- <template>
- <img :src="url">
- </template>
- <script>
- export
- default {
- props:
- ['src'],
- // 父组件传过来所需的 url
- data() {
- return {
- url: 'http://www.86y.org/images/loading.gif' // 先加载 loading.gif
- }
- },
- mounted() {
- var newImg = new Image() newImg.src = this.src newImg.onerror = () = >{ // 图片加载错误时的替换图片
- newImg.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489486509807&di=22213343ba71ad6436b561b5df999ff7&imgtype=0&src=http://a0.att.hudong.com/77/31/20300542906611142174319458811.jpg'
- }
- newImg.onload = () = >{ // 图片加载成功后把地址给原来的 img
- this.url = newImg.src
- }
- }
- }
- </script>
以下为纯 js 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>loading</title>
- </head>
- <body>
- <img id="img">
- <script>
- 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://a0.att.hudong.com/77/31/20300542906611142174319458811.jpg';
- }
- newImg.onload = () => { // 图片加载成功后把地址给原来的 img
- img.src = newImg.src
- }
- }
- </script>
- </body>
- </html>
以上这篇 vue 实现图片加载完成前的 loading 组件方法就是小编分享给大家的全部内容了, 希望能给大家一个参考, 也希望大家多多支持脚本之家
您可能感兴趣的文章:
vue2 实现数据请求显示 loading 图
浅谈 vue 中使用图片懒加载 vue-lazyload 插件详细指南
vue2 组件实现懒加载浅析
来源: http://www.jb51.net/article/134399.htm