防止图像被加载，直到点击

Question

我目前有一个图像和文本列表，我们有大约 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();
});

Answer 1

以下是您可以继续使用的方法：

$(.cards-desk).hide();
$('.show-more').on('click', function() {
  $(.cards-desk).append("You images html code");
  $(".cards-desk").show()
});