• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

react 实现图片正在加载中 加载完成 加载失败三个阶段的原理解析 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

最近博客写道项目列表中,发现这里比较多图片,一开加载会比较慢,然后就想要用一个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
}

PS:下面看下React中img图片加载完成前的loading效果

  • 我在React中有这么一个需求,那就是我希望在图片加载完成前的时候一直显示loading动画效果,等图片加载完成了就实现图片的渲染
  • 先讲讲具体的思路,再来说说实际的应用
  • 实现思路:
// 假设我要加载这三张网页图片
var imglist = ['http://example.com/demo1.png','http://example.com/demo2.png','http://example.com/demo3.png']
// images 使用用来存储 加载完成的图片的
var images = []
imglist.forEach(el=>{
	var image = new Image()
	image.src = el
	image.onload = function(){
		// 说明图片image加载完成了
		// 将加载完成的image添加到images中
		images.push(image)
	}
})

// 在组件渲染的时候进行判断
if(images.length === 3){
	// 说明此时三张网页图片已经全部加载完成了,可以进行渲染了
	// 渲染加载完成的图片
}else{
	// 说明此时网页图片还没有全部加载完成,这时候接着loadding动画效果
	// loadding动画效果
}

具体实现的例子

import React from 'react'
import { Carousel, Spin } from 'antd' // 使用antd
// 创建 Home组件
class Home extends React.Component{
	constructor(props){
		super(props)
		this.state = {
			imglist: [
				{
					id: '01',
					src: 'http://example.com/demo1.png',
					alt: 'demo1'
				},
				{
					id: '02',
					src: 'http://example.com/demo2.png',
					alt: 'demo2'
				},
				{
					id: '03',
					src: 'http://example.com/demo3.png',
					alt: 'demo3'
				}
			],
			images: []
		}
	}
	UNSAFE_componentWillMount(){
		// 在渲染之前进行操作
		var { imglist } = this.state
		var images = []
		imglist.forEach(el=>{
			var image = new Image()
			image.src = el.src
			image.onload = ()=>{
				images.push(image)
				this.setState({
					images
				})
			}
		})
	}
	render(){
		var { imglist, images } = this.state
		if(images.length === 3){
			// 说明三张图片已经全部加载完成,这个时候已经可以渲染图片了
			return (
				<div className='common-body'>
					<Carousel autoplay>
						{imglist.map(el=>(
							<img src={el.src} key={el.id} alt={el.alt} />
						))}
					</Carousel>
				</div>
			)
		}else{
			// 说明图片还没有全部加载完成,这个时候要显示loading动画效果
			return (
				<div className='common-loading'>
					<Spin tip='Loading...' size='large'></Spin>
				</div>
			)
		}
	}
}
export default Home

这个方法还是比较好用的

以上就是react 实现图片正在加载中 加载完成 加载失败三个阶段的原理解析的详细内容,更多关于react图片加载完成的资料请关注极客世界其它相关文章!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
React Native项目框架搭建的一些心得体会发布时间:2022-02-05
下一篇:
js实现多张图片打包成zip发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap