Question

所以我有一个新的网站，一个博客，我需要通过仅在用户点击按钮时加载元素来减少加载时间。我发布了这样的图片（带字幕）：

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

现在我想一次只显示10张图片，而页面底部只需一个按钮即可再加载10张图片。我无法使用显示/隐藏或可见性，因为图像仍将与页面一起下载，只是不显示。我只有一年多的网页设计，所以我对JS和JQuery了解不多。

将来可能会修复它，但如果你想在当前状态下看到它在图库/帖子部分的http://thedrawingblog.com处。

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

如果您想要加载图像，则必须从其他地方加载图像。这有两个基本选项，让我们先选择最差的选项。

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

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

单击HTML加载元素？

3 个答案: