avoid 429 error when load multiple images

Question

My webpage need to show about 40 images. For the amount to image to be downloaded from server, it cause 429 error randomly.

I want to guarantee my websites to show all the images for advertisement. how can I avoid 429 too many requests error? Is there any work around?

Does this answer your question? [How to avoid HTTP error 429 (Too Many Requests) python](https://stackoverflow.com/questions/22786068/how-to-avoid-http-error-429-too-many-requests-python) — Lety, Dec 01 '20 at 09:08
Really appreciate your comments, however already saw that but couldn't help me a lot — dante, Dec 01 '20 at 09:16
I use nodejs express as web App server and nginx as webserver — dante, Dec 01 '20 at 09:45

score -1 · Answer 1 · answered Dec 01 '20 at 11:29

I use lazy loading to solve this problem. image won't be requested to server if user not scroll down to image tag itself.

First I set data-srcto which I want to apply lazy loading.

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

inject script after body tags. here I wrote js script

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);
      });

the main idea is eventListener "scroll" and "resize" wait until user scrolling down to image tag, put src image path using data-src

you can use IntersectionObserver rather than eventListener, then you will need polyfill for IE user.

avoid 429 error when load multiple images

1 Answers1