延迟加载图像 - 每秒最大 x答案

【问题标题】：Lazy loading images - max x per second延迟加载图像 - 每秒最大 x
【发布时间】：2021-06-25 09:34:58
【问题描述】：

要求

以每秒发出最多 x 个请求的方式加载包含 100 多张图像的页面上的所有图像，以避免遇到速率限制器（允许来自同一 IP 的每秒最多 X 个请求）。

潜在解决方案

更改标记：

<img src="/someimage.jpg">

到

<img data-src="/someimage.jpg" class="lazyrate">

实现一个javascript，将“lazyrate”类的所有图像加载到一个数组中，将data-src替换为src（加载图像）一个接一个（或成批x），中间有延迟，这不会触发速率限制。

加载 5 张图片，等待 1 秒，加载 5 张下一张图片，等待 1 秒等。

为了改善用户体验，将此与仅加载可见的图像结合使用（传统的延迟加载）

问题

是否存在已经这样做的东西？像具有限速功能的延迟加载插件一样？还是我应该采取其他方法？

背景/“你为什么不只是……”

在具有强制速率限制的大型公司的内部网络应用程序上，显示大量图像（页面上超过 100 个）的网络应用程序有时会触发速率限制，因为所有图像都以同一时间。

不能在多个页面上拆分图像
不能禁用速率限制器
由于身份验证要求，无法将图像卸载到 CDN 或其他域

【问题讨论】：

标签： javascript html lazy-loading

【解决方案1】：

所以我最终编写了一个简单的 jquery 插件来处理这个问题，并在 github 上共享。

https://github.com/kjlibsol/lazyrate

它不关心图像是否在屏幕上，因为对于我的用例来说，拥有它很好，不需要拥有。

为了将来参考，这里是完整的源代码：

(function ($) {
    $.fn.lazyRate = function (options) {

        var settings = $.extend({
            delay: 200 //default (in ms)
        }, options);

        var sleepValue = 0;

        return this.each(function () {
            var realSrc = $(this).data("src"); //the value of the real image, we want to display
            var id = this.id; //the id of the image - needed to use setTimeout (which does not understand "this")
            setTimeout(
                function () {
                    $("#" + id).attr("src", realSrc); //replace the src with the value from data-src (to load the image)
                }, sleepValue);
            sleepValue = sleepValue + settings.delay; //increase the delay for each loop, as the setTimeout returns right away
        });
    };

}(jQuery));

用法：

在其中放置一些带有真实图像的 data-src 属性 - 并添加一个带有占位符图像的 src

<img id="img001" data-src="img/IMG_0032.jpg" src="img/placeholder.png" height="200" class="lazyrate">
<img id="img002" data-src="img/IMG_0037.jpg" src="img/placeholder.png" height="200" class="lazyrate">
...

现在在添加的类上运行插件 - 在这种情况下为lazyrate：

    <script>
        $(document).ready(function () {
            $(".lazyrate").lazyRate();
        });
    </script>

【讨论】：