滚动时从数据库中获取图像 (HTML)

Question

我想创建一个图片库，将图片存储在数据库中。假设我在页面上显示 9 张图像，当我向下滚动时，将显示接下来的 9 张图像或附加到当前的 9 张图像。我如何使用 ajax 和 php.

Answer 1

也许你应该看看 this one

这样的延迟加载插件

Answer 2

在客户端：

<ul id="images">
    <li><img src="img/test1.jpg" id="1" /></li>
    <li><img src="img/test2.jpg" id="2"/></li>
    <li><img src="img/test3.jpg" id="3" /></li>
    <li><img src="img/test4.jpg" id="4"/></li>
    <li><img src="img/test5.jpg" id="5"/></li>
</ul>

<script type="text/javascript">
    var last_image_id = $('ul#images li:last-child').attr('id');

    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        $.ajax({
            url: 'loadimage.php/last_id='last_image_id,
        })
        .done(function(data) {
            $('ul#images').append(data);
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
    }

</script>

在服务器端：

<?php
// connect to db
$query = 'select form image_table where id > '.$_GET['last_id'].' LIMIT 9';
$result = mysqli_query($connection, $query);
$rows=mysqli_fetch_assoc($result);

foreach ($rows as $row) {
    echo '<li><img src="'.$row->image.'" alt=""></li>';
}
?>

滚动时从数据库中获取图像 (HTML)

Get image from Database as you scroll (HTML)

html

javascript

php

database

ajax