Javascript 如何显示接下来的三幅图像单击“加载更多”按钮

我需要一个加载更多按钮来显示图像。在页面加载时，我显示3个图像，单击“加载更多”按钮后，屏幕上将显示下3个图像

我尝试了下面的代码，但不起作用。你能帮我解决这个问题吗

$（函数（）{
$（“.item”）.slice（0,2）.show（）；//选择前十个
$（“#加载”）。单击（函数（e）{//单击事件以获取加载更多信息
e、 预防默认值（）；
$（“.item:hidden”）.slice（0,2.show（）；//选择下10个隐藏的div并显示它们
if（$（“.item:hidden”）.length==0{//检查是否仍存在任何隐藏的div
警报（“不再有div”）；//如果没有剩余div，则发出警报
}
});
});
.lightgallery1a{
宽度：30.33%；
保证金：自动；
显示：内联块；
填充：0px 20px 20px 0；
}
.LightGallery 1 a img{
宽度：100%；
}
a{
显示：无；
}
您的css是错误的。使用：

.lightgallery1 a {
  display: none;
}

您的代码显示2个图像。如果要显示3，请将
.slice（0，2）
更改为
.slice（0，3）


$（函数（）{
$（“.item”）.slice（0,2）.show（）；//选择前十个
$（“#加载”）。单击（函数（e）{//单击事件以获取加载更多信息
e、 预防默认值（）；
$（“.item:hidden”）.slice（0,2.show（）；//选择下10个隐藏的div并显示它们
if（$（“.item:hidden”）.length==0{//检查是否仍存在任何隐藏的div
警报（“不再有div”）；//如果没有剩余div，则发出警报
}
});
});
.lightgallery1a{
填充：0px 20px 20px 0；
显示：无；
}
.LightGallery 1 a img{
宽度：33%；
}

尝试以下方法：


var链接=[
"https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg",
"https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg",
"https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg",
"https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg",
"https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg",
"https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg",
"https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg",
"https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg",
"https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg",
"https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg",
"https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg",
];
var$gallery=$（“.lightgallery1”）.first（）；
var$loadMore=$（“#加载”）；
函数加载更多（e）{
对于（变量i=0；i<3；i++）{
if（links.length）{
var src=links.pop（）；
var$link=$（“”）；
变量$img=$（“
.lightgallery1a{
宽度：30.33%；
保证金：自动；
显示：内联块；
填充：0px 20px 20px 0；
}
.LightGallery 1 a img{
宽度：100%；
}
a{
/*显示：无*/
}

加载更多
我忘了为前两个锚定标记添加class=“item”。@user9437856作为旁注。您的图像总是在您的站点上（不可见，但它们在那里）因为它们在html中。这会导致所有图像从源加载，占用一些带宽。更好的方法是动态加载图像，并在人们按load more时将html附加到您的图库中。wscourge的答案是如何执行的一个示例。另一种方法是使用ajax从服务器加载。