如下所示:
创新互联建站专注于企业营销型网站建设、网站重做改版、黄石港网站定制设计、自适应品牌网站建设、HTML5、商城网站建设、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为黄石港等各大城市提供网站开发制作服务。
<template> <img :src="url"> </template> <script> export default { props: ['src'], // 父组件传过来所需的url data() { return { url: '/upload/otherpica43/51490.gif' // 先加载loading.gif } }, mounted() { var newImg = new Image() newImg.src = this.src newImg.onerror = () => { // 图片加载错误时的替换图片 newImg.src = '/upload/otherpica43/51492.html' } 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 = '/upload/otherpica43/51490.gif'; // 先加载loading.gif var newImg = new Image(); newImg.src = 'https://avatars3.githubusercontent.com/u/1?v=3'; newImg.onerror = () => { // 图片加载错误时的替换图片 newImg.src = '/upload/otherpica43/51492.html'; } newImg.onload = () => { // 图片加载成功后把地址给原来的img img.src = newImg.src } } </script> </body> </html>
以上这篇vue实现图片加载完成前的loading组件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持创新互联。
新闻名称:vue实现图片加载完成前的loading组件方法
本文URL:https://www.cdcxhl.com/article36/igoosg.html
成都网站建设公司_创新互联,为您提供企业网站制作、域名注册、网站导航、软件开发、、ChatGPT
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联