Laad meer afbeelding bij scrollen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jop B

Jop B

22/08/2018 14:33:57
Quote Anchor link
Hallo,

Met onderstaand php script laad ik afbeeldingen uit de database
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
// Include the database configuration file
include_once 'dbconfig.php';

// Get images from the database
$query = $db->query("SELECT * FROM images ORDER BY id DESC");

if($query->num_rows > 0){
    while($row = $query->fetch_assoc()){
        $imageURL = 'uploads/'.$row["file_name"];
?>

    
    <div class="grid">
    <img class="photos" src="<?php echo $imageURL; ?>" alt="" />
    </div>
<?php }
}
else{ ?>

    <p>No image(s) found...</p>
<?php } ?>


Omdat het best nogal wat afbeelding zijn wil ik een bepaald resultaat laden en de volgende aantal per 10 of 15 pas bij het scrollen.

Hoe zou ik dit het beste kunnen toepassen?


Gr. Jop
Gewijzigd op 22/08/2018 14:35:15 door Jop B
 
PHP hulp

PHP hulp

27/09/2020 14:37:27
 
- Ariën -
Beheerder

- Ariën -

22/08/2018 14:46:42
Quote Anchor link
Dat heet een 'infinite scroll'

Voor jQuery is er een plugin voor:
https://infinite-scroll.com
 
Thomas van den Heuvel

Thomas van den Heuvel

22/08/2018 15:32:32
Quote Anchor link
Dit was een tijdje geleden al voorbij gekomen. Mogelijk heb je hier iets aan.
 
Jop B

Jop B

23/08/2018 23:12:39
Quote Anchor link
Ben ermee aan de slag gegaan
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$(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;
            }
            });
        }
    };
});


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?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.
 
Thomas van den Heuvel

Thomas van den Heuvel

24/08/2018 00:09:56
Quote Anchor link
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.
 
Jop B

Jop B

24/08/2018 00:21:06
Quote Anchor link
Hi Thomas,

Bedoel je dit
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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);
        }

    };


Toevoeging op 24/08/2018 00:25:19:

Dit was inderdaad de oplossing (y) thanks Thomas
Gewijzigd op 24/08/2018 00:22:22 door Jop B
 
Bryan De Baar

Bryan De Baar

24/08/2018 13:12:30
Quote Anchor link
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?
 
Yoeri Achterbergen

Yoeri Achterbergen

29/08/2018 00:27:55
Quote Anchor link
@thomas,

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


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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;
            }
            });
        }
    };
});
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.