React implementiert die Prinzipanalyse der drei Phasen Laden, Laden, Abschluss und Ladefehler

importiere { ImgHTMLAttributes } von "react";

/**
 * Eigenschaften der Bildplatzhalterkomponente*/
Exportschnittstelle IImagProps<T> erweitert ImgHTMLAttributes<T> {
  /**
   * Bilder werden geladen */
  Bild wird geladen?: Zeichenfolge,
  /**
   * Das Bild konnte nicht geladen werden */
  Fehlerbild?: Zeichenfolge,
 /**
  * Die Adresse, unter der das Bild normalerweise angezeigt wird*/
  src: Zeichenfolge,
}

importiere React, { useState } von 'react'
// Die folgenden beiden dienen zum Importieren der Standardbilder: import loadImg von './../../../assets/imgs/loading/load.gif';
importiere errorImg aus './../../../assets/imgs/loading/error.png'
exportiere Standardfunktion Img(props: IImagProps<any>) {
  // Bildadresse const [src, setSrc] = useState(props.loadingImg as string)
  // Ist das das erste Mal, dass geladen wird? Wenn du das nicht verwendest, wird es zweimal geladen const [isFlag, setIsFlag] = useState(false)
  /**
   * Bild geladen*/
  const handleOnLoad = () => {
    // Bestimmen Sie, ob es das erste Mal ist, zu laden, if (isFlag) return;
    // Ein img-Tag erstellen const imgDom = new Image();
    imgDom.src = props.src;
    // Das Laden des Bildes ist abgeschlossen. Verwenden Sie das normale Bild imgDom.onload = function () {
      setIsFlag(true)
      setSrc(Eigenschaften.src)
    }
    // Laden des Bilds fehlgeschlagen, Bildplatzhalter verwenden imgDom.onerror = function () {
      setIsFlag(true)
      setSrc(props.errorImg als Zeichenfolge)
    }
  }
  
  zurückkehren (
    <>
      <img src={src}
        beim Laden={handleOnLoad}
        Stil={{
          Höhe: 'erben',
        }}
      ></img>
    </>
  )
}
// Standardstil zum Laden von Bildern und fehlgeschlagenen Bildern festlegen Img.defaultProps = {
  Bild wird geladen: Bild wird geladen,
  Fehlerbild: Fehlerbild
}

// Angenommen, ich möchte diese drei Webbilder laden var imglist = ['http://example.com/demo1.png','http://example.com/demo2.png','http://example.com/demo3.png']
// images wird zum Speichern der geladenen Bilder verwendet var images = []
imglist.fürJeden(el=>{
	var image = neues Image()
	image.src = el
	bild.onload = funktion(){
		// Zeigt an, dass das Bild geladen wurde. // Das geladene Bild zu den Bildern hinzufügen images.push(image)
	}
})

//Beurteilen, wann die Komponente gerendert wird, if(images.length === 3){
	// Dies bedeutet, dass alle drei Webseitenbilder geladen wurden und gerendert werden können. // Geladene Bilder rendern. }else{
	// Dies bedeutet, dass die Bilder der Webseite noch nicht vollständig geladen wurden, sodass der Ladeanimationseffekt fortgesetzt wird. // Ladeanimationseffekt}

React von „react“ importieren
importiere { Carousel, Spin } von 'antd' // benutze antd
// Erstellen Sie die Home-Komponentenklasse Home extends React.Component{
	Konstruktor (Requisiten) {
		super(Requisiten)
		dieser.Zustand = {
			Bildliste: [
				{
					ID: '01',
					Quelle: 'http://example.com/demo1.png',
					alt: 'demo1'
				},
				{
					ID: '02',
					Quelle: 'http://example.com/demo2.png',
					alt: 'demo2'
				},
				{
					ID: '03',
					Quelle: 'http://example.com/demo3.png',
					alt: 'demo3'
				}
			],
			Bilder: []
		}
	}
	UNSAFE_componentWillMount(){
		// Führen Sie Operationen vor dem Rendern aus var { imglist } = this.state
		var Bilder = []
		imglist.fürJeden(el=>{
			var image = neues Image()
			bild.src = el.src
			bild.beladen = ()=>{
				Bilder.push(Bild)
				dies.setState({
					Bilder
				})
			}
		})
	}
	machen(){
		var { imglist, Bilder } = dieser.Zustand
		wenn(Bilder.Länge === 3){
			// Dies bedeutet, dass alle drei Bilder geladen wurden und gerendert werden können. return (
				<div Klassenname = 'gemeinsamer Textkörper'>
					<Karussell automatisch abspielen>
						{imglist.map(el=>(
							<img src={el.src} key={el.id} alt={el.alt} />
						))}
					</Karussell>
				</div>
			)
		}anders{
			// Das Bild wurde noch nicht vollständig geladen, daher sollte zu diesem Zeitpunkt der Ladeanimationseffekt angezeigt werden return (
				<div Klassenname = 'gemeinsames Laden'>
					<Spin-Tipp='Wird geladen...' Größe='groß'></Spin>
				</div>
			)
		}
	}
}
Standard-Startseite exportieren