手机网站建设方法,常州免费做网站,网站建设 精品课程,网站模板抄袭道阻且长#xff0c;行而不辍#xff0c;未来可期 图片预加载的原理#xff1a;new一个image对象#xff0c;用这个对象加载图片#xff0c;等这个对象将这个图片请求完后#xff0c;再将这个图片放入原本应该放置的位置
代码如下#xff1a;
import React, { useEffe… 道阻且长行而不辍未来可期 图片预加载的原理new一个image对象用这个对象加载图片等这个对象将这个图片请求完后再将这个图片放入原本应该放置的位置
代码如下
import React, { useEffect, useState } from react;const ImagePreloader ({ src }) {const [isLoading, setIsLoading] useState(true);const [isError, setIsError] useState(false);useEffect(() {//new一个image对象用这个对象加载图片const image new Image();image.src src;//图片加载完成image.onload () {setIsLoading(false);};//图片加载错误image.onerror () {setIsLoading(false);setIsError(true);};return () {// 清除事件处理程序以避免内存泄漏image.onload null;image.onerror null;};}, [src]);return (div{isLoading ? (divLoading.../div // 可根据需求自定义加载时的显示内容) : isError ? (divError loading image/div // 图片加载错误时的显示内容) : (img src{src} altPreloaded ///等图片加载完成后再把图片赋值给组件中的img)}/div);
};export default ImagePreloader;
骨架屏
图片预加载的时候可以使用骨架屏做加载效果 使用padding-top:100%给图片的高度做占位 简单的骨架屏效果
.imgLoading {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(90deg,rgba(190, 190, 190, 0.2) 25%,rgba(129, 129, 129, 0.24) 37%,rgba(190, 190, 190, 0.2) 63%);background-size: 400% 100%;animation: skeleton-loading 1.4s ease infinite;}keyframes skeleton-loading {0% {background-position: 100% 50%;}100% {background-position: 0 50%;}}
