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

Question

我目前有一个图片和文字的列表，我们有大约1000张图片，所以页面加载很慢。

我有一个隐藏和显示的功能，当点击时只加载下三个使用js分片方法。

我的图片是通过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()
});