最近博客写道项目列表中，发现这里比较多图片，一开加载会比较慢，然后就想要用一个loading的图片来占位。与此同时,如果图片加载失败那么显示错误的图片，不显示一个原有的错误，那样比较难看。

效果

原理解析

这个就是一个组件，一个图片展示的组件，直接更改img标签的url地址就好，对的，是这样的，在vue中直接更改地址，vue会有响应式的更新数据。

图片的事件

图片是有许多的事件的，例如，onload, onerror等,图片只要一加载就会调用onload的事件，不管是加载成功还是加载失败都会调用这个方法。而onerror方法是图片在没有显示出来就会调用这个方法。从这两个方法对比可以得知，我们需要使用onload来一开始加载图片，并且图片可以成功，可以失败等。

组件代码

import { ImgHTMLAttributes } from "react";/*** 图片占位组件属性*/
export interface IImagProps<T> extends ImgHTMLAttributes<T> {/*** 加载中的图片*/loadingImg?: string,/*** 失败加载的图片*/errorImg?: string,/*** 图片正常显示的地址*/src: string,
}import React, { useState } from 'react'
// 下面这两个是导入默认的图片
import loadImg from './../../../assets/imgs/loading/load.gif';
import errorImg from './../../../assets/imgs/loading/error.png'
export default function Img(props: IImagProps<any>) {// 图片地址const [src, setSrc] = useState(props.loadingImg as string)// 是否第一次加载，如果不使用这个会加载两次const [isFlag, setIsFlag] = useState(false)/*** 图片加载完成*/const handleOnLoad = () => {// 判断是否第一次加载if (isFlag) return;// 创建一个img标签const imgDom = new Image();imgDom.src = props.src;// 图片加载完成使用正常的图片imgDom.onload = function () {setIsFlag(true)setSrc(props.src)}// 图片加载失败使用图片占位符imgDom.onerror = function () {setIsFlag(true)setSrc(props.errorImg as string)}}return (<><img src={src}onLoad={handleOnLoad}style={{height: 'inherit',}}></img></>)
}
// 设置默认的图片加载中的样式和失败的图片
Img.defaultProps = {loadingImg: loadImg,errorImg: errorImg
}

react 实现图片正在加载中加载完成加载失败三个阶段的相关推荐

img加载中显示loading，加载失败显示默认图片（React）
实现效果完整代码 import { useRef, useState } from 'react'; import './index.less'; import errorImg from '@/c ...
img加载中显示loading，加载失败隐藏img并显示自定义内容而且可点击重新加载（React）
图片加载效果完整代码 import { useRef, useState } from 'react'; import './index.less';export default function ...
mint-ui 图片懒加载及请求数据加载中提示方法
图片懒加载: 引入需要的文件 <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></scr ...
记录--Vue自定义指令实现加载中效果v-load（不使用Vue.extend）
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助网站效果演示:ashuai.work:8888/#/myLoad GitHub仓库地址代码:github.com/shuirongshu- ...
react 判断图片是否加载完成_如何判断图片（img）是否已经加载成功--基于react...
我过去经常会问: 有没有一种方法去判断子类组件是否已经渲染完成? 答案当然是有的啦 componentDidMount(),在react component 已经渲染完成时就会调用 compone ...
react 判断图片是否加载完成_React中型项目的优化实践
项目介绍整个项目大概有60+个页面,用到的组件大概150+,package里面的依赖大概有70+个,应该勉强算得上是一个中型的React的项目了. 下面给大家看看我们现在build一次项目的结果-- ...
JQuery AJAX 加载 HTML代码“lt”形式的。怎么解析成形式，并且把img解析成图片输出到浏览器中。...
声明:此方法目前用火狐通过验证.IE未能通过. 前台写法: <div style="visibility:hidden" id="Change" ...
图片在xml文件中直接加载.9文件
图片在xml文件中直接加载.9文件,可能会因为图片压缩的缘故产生锯齿,如果使用 ImageView imageview = (ImageView) view .findViewById(R.id.in ...
从UIL库谈Android图片加载中需要注意的事情
Android Universal Image Loader 算是Android中最流行的图片加载库了,作者Sergey的确牛逼,能将整个Android图片加载的点点滴滴考虑的如此全面.网上研究这个开 ...
android webview 加载图片一直显示正在加载中
今天无意间发现自己的项目WebView加载时,没有调用到onPageFinished,部分图片一直显示加载中,找了老久不知道出现什么问题~~~ 无奈之下拿出老版本测试,发现加载很正常,只好把代码拿出来 ...

react 实现图片正在加载中加载完成加载失败三个阶段的

效果

原理解析

图片的事件

组件代码

react 实现图片正在加载中加载完成加载失败三个阶段的相关推荐

最新文章

热门文章

react 实现图片正在加载中 加载完成 加载失败三个阶段的

效果

原理解析

图片的事件

组件代码

react 实现图片正在加载中 加载完成 加载失败三个阶段的相关推荐

最新文章

热门文章

react 实现图片正在加载中加载完成加载失败三个阶段的

react 实现图片正在加载中加载完成加载失败三个阶段的相关推荐