Laad meer afbeelding bij scrollen

Dat heet een 'infinite scroll'

Voor jQuery is er een plugin voor:
https://infinite-scroll.com

Dit was een tijdje geleden al voorbij gekomen. Mogelijk heb je hier iets aan.

Ben ermee aan de slag gegaan

$(document).ready(function(){

var flag = 0;

//ajax call
	$.ajax({
		type: "GET",
		url: "result.php",
		data: {
			'offset':0,
			'limit':12
		},
		success: function(data){
			$('.gallery').append(data);
			flag += 12;
		}
	});
	
	window.onscroll = function(ev) {
    	if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        	//ajax call
			$.ajax({
				type: "GET",
				url: "result.php",
				data: {
					'offset': flag,
					'limit':12
			},
			success: function(data){
				$('.gallery').append(data);
				flag += 12;
			}
			});
    	}
	};
});

<?php
if(isset($_GET['offset']) && isset($_GET['limit'])){



	$offset = $_GET['offset'];
	$limit = $_GET['limit'];
	
	include_once 'config.php';
	
	$data = mysqli_query($connection, "SELECT * FROM images LIMIT {$limit} OFFSET {$offset}");
		
	while($row = mysqli_fetch_array($data)){
	
		$imageURL = 'uploads/'.$row["file_name"];
		?>
		
	<div class="grid">
    <img class="photos" src="<?php echo $imageURL; ?>" alt="" />
    </div>
    <?php

	}
}
?>

Het werkt, maar loop tegen een probleem aan en dat is dat met scollen afbeeldingen dubbel worden geladen.
Ik moet erbij zeggen dat de afbeeldingen grote bestanden zijn.

Bouw een timeout in zodat de scrollfunctie niet meerdere keren vuurt als je de bodem van je pagina bereikt? Of verwijder de onscroll listener tijdelijk ofzo, en voeg deze weer toe als de AJAX call compleet is. En wellicht kun je overwegen om in eerste instantie thumbnails te serveren.

Hi Thomas,

Bedoel je dit

var timer;
	window.onscroll = function(ev) {
	
	if ( timer ) clearTimeout(timer);

    	if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    	$(".loading").fadeIn();
    	
    	timer = setTimeout(function(){ 
        	//ajax call
			$.ajax({
				type: "GET",
				url: "result.php",
				data: {
					'offset': flag,
					'limit':12
			},
			success: function(data){
				$('.gallery').append(data);
				flag += 12;
				$(".loading").fadeOut(1000);
      }
      });
			}, 2000);
    	}

	};

[size=xsmall]Toevoeging op 24/08/2018 00:25:19:[/size]

Dit was inderdaad de oplossing (y) thanks Thomas

Kun je dan ook bijvoorbeeld de laatste nieuwe data uit de database halen en bij de ajax call naar oudere data?
doe je dit dan bij je ajax call al aangeven of moet je dan in je php wat aanpassen?

@thomas,

Hoe verwijder je de onscroll listener? als ik $(window).unbind('scroll'); gebruik werk dit niet.

$(document).ready(function(){

var flag = 0;

//ajax call
    $.ajax({
        type: "GET",
        url: "result.php",
        data: {
            'offset':0,
            'limit':12
        },
        success: function(data){
            $('.gallery').append(data);
            flag += 12;
        }
    });
    
    window.onscroll = function(ev) {
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            $(window).unbind('scroll');
            //ajax call
            $.ajax({
                type: "GET",
                url: "result.php",
                data: {
                    'offset': flag,
                    'limit':12
            },
            success: function(data){
                $('.gallery').append(data);
                flag += 12;
            }
            });
        }
    };
});