You might want to load all the items on the page at the same time, and use jQuery to display however many at a time. So for example:
By default you could load (to the DOM) and hide all of them, then load 4 at a time using jQuery’s slice
Here’s an example for my videos, however you could also hide the previous 4 videos before loading the next 4 to simulate what you are after:
<script>
$(function(){
$(".video_single").hide(); //hide all div classes called container
$(".video_single").slice(0, 4).fadeIn(); // show the first 4 container divs
$("#load_more").click(function(e){ // click button to load more
e.preventDefault();
$(".video_single:hidden").slice(0, 4).fadeIn(800); // select next 4 hidden divs and show them
if($(".video_single:hidden").length == 0){ // check if any hidden divs still exist
$("#load_more").hide(); //if not more divs are hidden, hide button
}
});
});
</script>