Laad meer afbeelding bij scrollen
Met onderstaand php script laad ik afbeeldingen uit de database
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 } ?>
// 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
Code (php)
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
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;
}
});
}
};
});
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)
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
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
}
}
?>
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.
Bedoel je dit
Code (php)
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
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);
}
};
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
doe je dit dan bij je ajax call al aangeven of moet je dan in je php wat aanpassen?
Hoe verwijder je de onscroll listener? als ik $(window).unbind('scroll'); gebruik werk dit niet.
Code (php)
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
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;
}
});
}
};
});
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;
}
});
}
};
});