NextJS 中非懒加载重要图片的延迟加载实现方法及相关疑问

高优先级图片非阻塞加载实现方案 #

NextJS 原生已经对图片加载做了深度优化，你的需求可以通过两种路径实现：

• 首选内置next/image组件，给重要图片添加priority属性即可。该属性会自动将图片标记为高优先级，跳过默认懒加载逻辑，并且会在首屏绘制完成后立即启动加载，不会阻塞主线程渲染和关键资源加载，NextJS 底层已经自动处理了预加载优先级调度，不会和首屏CSS、核心JS等资源抢占带宽。
• 如果需要自定义图片组件、自己控制加载逻辑，可通过requestIdleCallback调度加载时机：

  import { useEffect, useRef } from 'react';
  
  function HighPriorityImg({ src, alt }) {
    const imgRef = useRef(null);
  
    useEffect(() => {
      const loadImg = () => {
        if (imgRef.current) imgRef.current.src = src;
      };
  
      // 浏览器空闲时执行，完全不阻塞主线程任务，不支持的浏览器用setTimeout兜底
      if ('requestIdleCallback' in window) {
        requestIdleCallback(loadImg);
      } else {
        setTimeout(loadImg, 0);
      }
    }, [src]);
  
    return <img ref={imgRef} alt={alt} />;
  }
  

  该方案会把图片赋值操作放到浏览器空闲时段执行，完全不会抢占主线程的渲染、交互处理资源。你也可以监听window.load事件触发后再执行加载逻辑，该事件的触发时机恰好是页面初始绘制完全完成后。

useEffect中设置图片URL的阻塞问题说明 #

• 给img.src赋值的操作本身是同步轻量操作，耗时基本在微秒级，不会阻塞主线程。
• 图片资源的下载是浏览器后台异步执行的，不会占用JS主线程的执行时间，所以哪怕你直接在useEffect中赋值src，也不会阻塞页面渲染和用户交互。
• 唯一可能出现的性能问题是一次性同步赋值大量图片src，导致浏览器瞬间发起大量网络请求，抢占首屏关键资源的带宽，但这属于网络队列拥堵，不是JS主线程阻塞，通过requestIdleCallback做调度即可规避。

内容的提问来源于stack exchange，提问作者Akash