如何为 HTML/CSS 页面添加加载更多按钮？

Question

我想制作一个单页网站，它将包含大量内容。假设上面有 1000 张照片。我不希望人们等待 5 分钟来加载我的页面。所以我想在页面底部添加加载更多按钮。

如何用 HTML/CSS/JS 做到这一点？

原文由 Saiful Islam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以首先将所有 div s’ 设置为 display:none; ，然后使用 jQuery 显示前 10 个（或您希望显示的任意多个）：

 $(function(){
    $("div").slice(0, 10).show(); // select the first ten
    $("#load").click(function(e){ // click event for load more
        e.preventDefault();
        $("div:hidden").slice(0, 10).show(); // select next 10 hidden divs and show them
        if($("div:hidden").length == 0){ // check if any hidden divs still exist
            alert("No more divs"); // alert if there are none left
        }
    });
});

例子。

当您可以通过几行代码实现您想要的功能时，这为您省去了包含整个插件的麻烦。

原文由 Purag 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我用 Ajax 和 Django 做到了。 Idk 了解如何着手去做可能会有所帮助。

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
.not-visible {
    display: none;
}
</style>
<div id="pic_box"></div>
<div id="spinner-box" class="not-visible"><div class="spinner-border text-dark" role="status"></div></div>
<div id="loadmore-box">
    <button class="btn btn-primary" id="loadbtn">
    Load More
    </button>
</div>

<script>

const pics_box = document.getElementById('pic-box')
const loadbtn = document.getElementById('loadbtn')
const spinner_box = document.getElementById('spinner-box')
const loadmore_box = document.getElementById('loadmore-box')
let visible = 3

const handleGetData = () => {
    $.ajax({
    type: "GET",
    url: `http://127.0.0.1:8000/post-json/${visible}/`,
    success: function(response){
        max_size = response.max
        const data = response.data
        spinner_box.classList.remove('not-visible')
        setTimeout(()=>{
              spinner_box.classList.add('not-visible')
                data.map(picz=>{
                    console.log(pics.id)
                    pics_box.innerHTML += `<div class="card p-3 mt-3 mb-3">

                                                <br>

                                                ${pics.id}

                                            </div>`
                })
        }, 1000)
        data.map(comment=>{
        console.log()
        })
        if(max_size){
            console.log('done')
            loadmore_box.innerHTML = "<h4>No more pics to load</h4>"
        }
    },
    error: function(error){
        console.log(error)
    }

})
}
handleGetData()

loadbtn.addEventListener('click', () => {
visible += 3
handleGetData()
} )

</script>

那将是模板，然后是 views.py 如果你使用 django，

 class PostJsonListView(View):
    def get(self, *args, **kwargs):
        print(kwargs)
        upper = kwargs.get('num_pics')
        lower = upper - 3
        pics = list(Pics.objects.values()[lower:upper])
        pics_size = len(Pics.objects.all())
        size = True if upper >= pics_size else False
        return JsonResponse({'data': comment, 'max': size}, safe=False)

这是我的第一个答案所以…如果这是我必须这样做的话

原文由 Sanjeet K 发布，翻译遵循 CC BY-SA 4.0 许可协议