加载多张图片时避免 429 错误答案

【问题标题】：avoid 429 error when load multiple images加载多张图片时避免 429 错误
【发布时间】：2026-01-08 19:05:02
【问题描述】：

我的网页需要显示大约 40 张图片。从服务器下载的图片数量，随机导致429错误。

我想保证我的网站显示所有的广告图片。如何避免 429 too many requests 错误？有什么解决办法吗？

【问题讨论】：

这能回答你的问题吗？ How to avoid HTTP error 429 (Too Many Requests) python
真的很感谢你们的cmets，但是已经看到了但是帮不了我很多
你有什么样的服务器？
我使用 nodejs express 作为 web 应用服务器，使用 nginx 作为 webserver

标签： html

【解决方案1】：

我使用lazy loading 来解决这个问题。如果用户不向下滚动到图像标签本身，则不会向服务器请求图像。

首先我将data-src设置为我想应用延迟加载。

<img data-src="../img2.png" class="lazy"/>
<img data-src="../img2.png" class="lazy"/>
<img data-src="../img2.png" class="lazy"/>

在正文标记后注入脚本。这里我写了js脚本

document.addEventListener("DOMContentLoaded", function () {
        const lazyLoadImages = document.querySelectorAll(".lazy");
        let lazyLoadThrottleTimeout;

        function lazyLoading() {
          if (lazyLoadThrottleTimeout) {
            clearTimeout(lazyLoadThrottleTimeout);
          }

          lazyLoadThrottleTimeout = setTimeout(function () {
            const scrollTop = window.pageYOffset;
            lazyLoadImages.forEach(function (image) {
              if (image.offsetTop < window.innerHeight + scrollTop) {
                image.src = image.dataset.src;
                image.classList.remove("w_lazy");
              }
            });
            if (lazyLoadImages.length) {
              document.removeEventListener("scroll", lazyLoading);
              window.removeEventListener("resize", lazyLoading);
              window.removeEventListener("orientationchange", lazyLoading);
            }
          }, 35);
        }
        document.addEventListener("scroll", lazyLoading);
        window.addEventListener("resize", lazyLoading);
        window.addEventListener("orientationchange", lazyLoading);
      });

主要思想是eventListener“滚动”和“调整大小”等到用户向下滚动到图像标签，使用data-src放置src图像路径

你可以使用IntersectionObserver而不是eventListener，那么你需要为IE用户使用polyfill。

【讨论】：