在单击之前阻止加载图像

问：

我目前有一个图像和文本列表，我们有大约 1000 张图像，因此页面加载速度很慢。

我有一个隐藏和显示函数，当使用 js slice 方法单击时，它只会加载接下来的三个。

我的图像是从wp php循环加载的，由于服务器限制，我无法使用Ajax，有没有一种简单的方法可以在用户单击按钮之前不加载图像？

问题

我的问题是，在用户单击按钮显示接下来的 3 张图像之前，如何防止加载所有图像 我试过了

$(".secondary-card").each(function() {
        var obj = $(this);
        obj.data("objsrc", obj.attr("data-src"));
        obj.hide().attr("data-src", "").before("<span class=\"loading\">loading . . .</span>");
    });

但我的页面剂量似乎并没有快多少

这是我当前加载接下来 3 张图像的代码

const cards = $('.card-deck')
let clicks = 3;

if (cards.length > 3) {
    cards.hide();
    cards.slice(0, 3).show();
}
$('.show-more').on('click', function() {
    clicks = clicks + 3;
    if (clicks > cards.length) {
        clicks = cards.length
    }
    cards.slice(0, clicks).fadeIn();
});