myList id我的ul标签的id。

Question

我想创建一个单页网站，它将拥有巨大的内容。假设它上面有1000张照片。我不希望人们等待5分钟来加载我的页面。所以我想在页面底部添加LOAD MORE按钮。

如何使用HTML / CSS / JS？

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

Example

这可以节省您在几行代码中实现所需内容时包含整个插件的麻烦。

Answer 2

最接近我可以阅读你的问题，你想要google和facebook现在用来加载帖子的效果。

访问infinite-scroll.com 他们有你的答案。

Answer 3

myList id我的ul标签的id。

x = 9从第一个开始只提供9个视图，您可以再次加载3个视图。

$j(document).ready(function () {
        size_li = $j("#myList li").size();
        x=9;
        $j('#myList li:lt('+x+')').show();
        $j('#loadMore').click(function () {
            x= (x+3 <= size_li) ? x+3 : size_li;
            $j('#myList li:lt('+x+')').show();
        });
    });

Answer 4

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

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

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

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)

这是我的第一个答案，所以......如果这是我必须做的事情，我知道

Answer 5

不确定您是否有后端服务器或类似的东西，但无论如何，您可以尝试一些javascript模板引擎，如jQuery Template，mustache等。

并通过js动态加载图像将是一个解决方案：）

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

5 个答案:

myList id我的ul标签的id。