单击时加载HTML元素？

Question

所以我有了一个新的网站，一个博客，我需要通过在用户点击按钮时只加载元素来减少加载时间。我发布的图片(带有说明文字)如下：

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

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

它可能会在未来修复，但如果你想看到它的当前状态，请访问http://thedrawingblog.com的Gallery/Posts部分。

Answer 1

一种方法是使用hidden属性和data-*属性。

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

当您想要显示图像时：

document.getElementById('show-img-btn').addEventListener('click', function(){
    var image = document.getElementById('img-to-show');
    image.removeAttribute('hidden');
    image.src = image.dataset.src;
});

我不确定你对多个图像使用的是什么结构，但希望这能让你有足够的理由将其转换为你的需求：

示例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>

js：

document.getElementById('show-img-btn').addEventListener('click', function(){

    // get the hidden divs
    var imageDivs = document.getElementById('images').querySelectorAll('[hidden]');

    // convert to array, and slice out the first 10.
    var imageDivsArray = [].slice.call(imageDivs,0,10);

    // loop through the divs, showing each one,
    // and setting the src of the child <img>
    imageDivsArray.forEach(function(el,idx,arr) {
        // remove the `hidden` attribute
        el.removeAttribute('hidden');

        // grab the child image
        var img = el.getElementsByTagName('img')[0];

        // set the src
        img.src = img.dataset.src;
    });
});

https://jsfiddle.net/jsdn46Lk/

这里可以做一些明确的优化，但除非你加载了大量的图像，否则你应该没问题。

Answer 2

如果您希望加载图像，则必须从其他位置加载它们。这里有两个基本的选择，让我们先选择最坏的一个。

20世纪90年代的方法

// 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] + '">')
    }
})

2000年的方法

我不会费心做另一个示例代码，因为它与前面几乎相同，只是在单击之后会有一个Ajax请求。

免责声明:未经测试的代码，如果是错误的请告诉我。

Answer 3

在这里你可以在php中找到一个类似的DEMO。

这是另一个没有php的DEMO，它使用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>

css代码：

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

和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();
    });
});