How to add load more button for a HTML/CSS page?

Question

I want to make a single page website and it will have huge content. Suppose it has 1000 photos on it. I don't want people to wait 5 minutes to load my page. So I wanna add LOAD MORE button on the page bottom.

How to do that with HTML/CSS/JS?

Answer 1

You could set all the divs' to display:none; at first and then use jQuery to show the first 10 (or however many you wish to show):

$(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.

This saves you the trouble of including an entire plugin when what you want can be achieved in a few lines of code.

Answer 2

The closest i can get reading your question, you want the effect which google and facebook uses nowadays to load posts.

Visit infinite-scroll.com They have your answer.

Answer 3

myList id the id of my ul tag.

x=9 gives 9 views from first only further you can load again at a time 3 more will be loaded.

$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

I did it with Ajax and Django. Idk it might be somewhat helpful to see how you can go about doing it.

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

That would be for the Template, and then for the views.py if your using 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)

This is my first answer so...idk if this is how i have to do it