Javascript HTML在单击时加载元素？

所以我有了一个新网站，一个博客，我需要在用户点击按钮时只加载元素来减少加载时间。我发布的图片（带有标题）如下：

<table>
    <tr>
        <td>
            <p>Caption</p>
       </td>
    </tr> 
    <tr>
       <td>
           <img src="path">
       </td>
   </tr>
</table>

标题

现在我只希望一次只显示10张图片，在页面底部的一个按钮可以加载10张以上的图片。我不能使用“显示/隐藏”或“可见性”，因为图像仍将与页面一起下载，只是不显示。我做网页设计才一年多一点，所以我对JS和JQuery了解不多

---

它可能会在将来被修复，但是如果你想在Gallery/Posts部分看到它的当前状态。

一种方法是使用

hidden

属性和

data-*

属性

<img id="img-to-show" hidden data-src="path/to/image.jpg" />
<button id="show-img-btn">Show image</button>

---

我不确定您对多个图像使用的确切结构，但希望这足够有意义，您可以将其转换为您的需要：

html示例：

<div id="images">
    <div hidden>
        <div>Caption</div>
        <img data-src="path/to/image.jpg" />
    </div>
    <div hidden>
        <div>Caption 2</div>
        <img data-src="path/to/image2.jpg" />
    </div>
    <div hidden>
        <div>Caption 3</div>
        <img data-src="path/to/image3.jpg" />
    </div>
    ...
</div> 
<button id="show-img-btn">Show image</button>

说明文字
标题2
标题3
...
显示图像

js:

document.getElementById（'show-img-btn'）。addEventListener（'click'，function（））{
//得到隐藏的div
var-imageDivs=document.getElementById（'images'）.queryselectoral（'[hidden]'）；
//转换为数组，并切掉前10个。
var imageDivsArray=[].slice.call（imageDivs，0,10）；
//循环浏览div，显示每个div，
//以及设置子对象的src

这里可以进行一些明确的优化，但除非你加载了大量图像，否则应该没问题。
如果你想加载图像，必须从其他地方加载。有两个基本选项，让我们先选择最差的一个

1990年代的方法

// Create an array of images
var images = ['images/img1.jpg', 'images/img2.jpg', 'images/img3.jpg']

// Where are we in the image list?
var counter = 0

// Listen for button click
$('.more-images').click(function() {

    // Make sure we don't try to load more images than there are by
    // reducing the limit
    if(counter + 10 > images.length) {
        var limit = images.length
    } else {
        var limit = counter + 10
    }

    // Add a number of images with jQuery, in this case 10.
    for(counter; counter<limit; counter++) {
        $('.images-container').append('<img src="' + images[counter] + '">')
    }
})

//创建一个图像数组
var images=['images/img1.jpg'，'images/img2.jpg'，'images/img3.jpg']
//我们在图像列表中的什么位置？
变量计数器=0
//听按钮点击
$（'.more images'）。单击（函数（）{
//请确保我们不会尝试加载的图像超过
//降低限额
如果（计数器+10>图像长度）{
var limit=images.length
}否则{
var限制=计数器+10
}
//使用jQuery添加大量图像，在本例中为10。
对于（counter；counter，您可以在php中找到类似的方法。

还有一个没有php，它使用html，js，css。
我希望这会让你痛苦

html代码：

<ul id="myList">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <li>Thirteen</li>
    <li>Fourteen</li>
    <li>Fifteen</li>
    <li>Sixteen</li>
    <li>Seventeen</li>
    <li>Eighteen</li>
    <li>Nineteen</li>
    <li>Twenty one</li>
    <li>Twenty two</li>
    <li>Twenty three</li>
    <li>Twenty four</li>
    <li>Twenty five</li>
</ul>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

和js代码：

$(document).ready(function () {
    // Load the first 3 list items from another HTML file
    //$('#myList').load('externalList.html li:lt(3)');
    $('#myList li:lt(3)').show();
    $('#loadMore').click(function () {
        $('#myList li:lt(10)').show();
    });
    $('#showLess').click(function () {
        $('#myList li').not(':lt(3)').hide();
    });
});

for循环应该有
；
，而不是
，
，很好，只是别忘了加载jQuery库当然，这可以隐藏图像和缩短加载时间，但它仍然存在问题。标题没有隐藏，要将其应用于许多图像和标题？那么您需要多个ID，它们彼此都不同。是否有通过使用类来实现这一点的方法？我已经为多个图像的答案添加了一些示例代码和JSFIDLE。这会起作用，是的，但它不适用于我希望的方式。首先，它不会缩短页面加载时间，因为图像仍将与页面一起下载，只是隐藏在用户视图中。我的问题是重新下载当用户点击一个按钮，而不是简单地改变页面的外观时，这些元素会被删除。
<ul id="myList">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <li>Thirteen</li>
    <li>Fourteen</li>
    <li>Fifteen</li>
    <li>Sixteen</li>
    <li>Seventeen</li>
    <li>Eighteen</li>
    <li>Nineteen</li>
    <li>Twenty one</li>
    <li>Twenty two</li>
    <li>Twenty three</li>
    <li>Twenty four</li>
    <li>Twenty five</li>
</ul>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

#myList li{ display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
#showLess {
    color:red;
    cursor:pointer;
}
#showLess:hover {
    color:black;
}

$(document).ready(function () {
    // Load the first 3 list items from another HTML file
    //$('#myList').load('externalList.html li:lt(3)');
    $('#myList li:lt(3)').show();
    $('#loadMore').click(function () {
        $('#myList li:lt(10)').show();
    });
    $('#showLess').click(function () {
        $('#myList li').not(':lt(3)').hide();
    });
});