react图片预加载

这篇具有很好参考价值的文章主要介绍了react图片预加载。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

道阻且长,行而不辍,未来可期

图片预加载的原理: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 ? (
        <div>Loading...</div> // 可根据需求自定义加载时的显示内容
      ) : isError ? (
        <div>Error loading image</div> // 图片加载错误时的显示内容
      ) : (
        <img src={src} alt="Preloaded" />//等图片加载完成后,再把图片赋值给组件中的img
      )}
    </div>
  );
};

export default ImagePreloader;

骨架屏

图片预加载的时候,可以使用骨架屏做加载效果
使用padding-top:100%给图片的高度做占位
简单的骨架屏效果文章来源地址https://www.toymoban.com/news/detail-685862.html


  .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%;
    }
  }

到了这里,关于react图片预加载的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript 框架比较:Angular、React、Vue.js

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。这些首字母相同的选项各自代表不同的技术加工具组合。为了在这些技术栈中做出明智选择,让我们先从核心组件聊起,再对各自前端框架(React、Angular 和 Vue)进行简化比

    2024年01月20日
    浏览(59)
  • js实现img图片懒加载

    在前端中,可以使用 JavaScript 来实现图片的懒加载。下面是一种常见的实现方式: 在 HTML 文件中,将需要懒加载的图片的 src 属性替换为一个占位符,例如使用一个透明的空白图片或者是一个包含背景色的 div。 给这些图片添加一个自定义的属性,例如 data-src ,并将真实的图

    2024年02月11日
    浏览(37)
  • react结合js获取屏幕鼠标滚动等距离实现页面懒加载

            也叫延迟加载,指的是在长网页中延迟加载内容或图像,是一种很好优化网页性能的方式。在滚动屏幕之前,可视化区域之外的内容不会进行加载,在屏幕滚动距离底部到一定距离时才加载。这样网页的加载速度更快,减少了服务器的负载。         懒加载适

    2024年02月10日
    浏览(43)
  • Three.js加载360全景图片/视频

    效果 原理 将全景图片/视频作为texture引入到three.js场景中 将贴图与球形网格模型融合,将球模型当做成环境容器使用 处理视频时需要以dom为载体,加载与控制视频动作 每次渲染时更新当前texture,以达到视频播放效果 全景图片加载有球体与正方体两种模式,区别在于是加载

    2024年02月04日
    浏览(42)
  • 从javascript到vue再到react:前端开发框架的演变

    目录 JavaScript: 动态语言的基础 JavaScript:Web开发的起点 Vue.js: 渐进式框架的兴起 Vue.js:简洁、高效的前端框架 React.js: 声明式UI的革新 React.js:强大、灵活的前端框架 演变之路与未来展望 演变过程 当提到前端开发中的框架时,JavaScript、Vue.js和React.js是三个最常见的名词。它

    2024年02月07日
    浏览(53)
  • 【three.js / React-three-fiber】加载3D模型性能优化

    无论是大型虚拟世界还是简单的网站,性能优化都是必要的。 特别是在运用三维模型的情况下,我们需要更加深入的优化。因为 三维模型通常包含大量的数据和复杂的几何形状 ,如果不进行性能优化,浏览器可能会因为负载过重而崩溃。 在本文中,我们将探讨如何在 thre

    2024年02月02日
    浏览(49)
  • js,jquery解决 图片加载-滚动底部 问题

    问题描述 :让图片加载完成后,再执行滚动函数,避免出现图片加载一半的时候,滚动下来底部只出现半张图片。 这里记录4种测试成功方式: (适用于不容易找到图片位置的情况,否则直接onload函数即可)

    2024年01月18日
    浏览(36)
  • 使用JavaScript给图片添加图片水印的前端实现方法

    当涉及图片处理时,JavaScript是一种强大的工具。在本篇博客中,我们将学习如何使用JavaScript来给图片添加水印,并将其封装成一个函数,以便在需要的时候重复使用。 在开始之前,确保你已经准备好了以下内容:         1.一张待添加水印的图片。         2.水印图片。

    2024年03月15日
    浏览(63)
  • 前端(十五)——开源一个用react封装的图片预览组件

    👵博主:小猫娃来啦 👵文章核心:开源一个react封装的图片预览组件 Gitee:点此跳转下载 CSDN:点此跳转下载 装依赖 运行 打开 创建一个React函数组件并命名为 ImageGallery 。 在组件内部,使用useState钩子来定义状态变量,并初始化为合适的初始值。 selectedImageUrl 来追踪当前选

    2024年02月10日
    浏览(56)
  • JavaScript框架 Angular、React、Vue.js 的全栈解决方案比较

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。前端框架(React、Angular 和 Vue)进行简化比较。 MERN 技术栈包含四大具体组件: MongoDB:一款强大的 NoSQL 数据库,以灵活的 JSON 格式存储数据。 Express.js:一套极简但强大的

    2024年02月03日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包