Question

我在数据库中有1000张图片。在页面加载时，我随机显示60个图像，当用户滚动时，我通过AJAX请求添加了20个图像。

我做的第一种方法是将所有图像加载到容器中然后隐藏所有图像并显示60个第一个图像，并在滚动开始时显示每20个图像。但问题是页面加载都显示无图像（所有1k图像）。

第二种方法从DB中随机加载60张图像。然后滚动加载额外的20张图片：

var id_array=[];
$('.items').each(function(index, element) {
    id_array.push($(this).data('id'));
});

$.post("request.php", {
    send:  "true",
    json:JSON.stringify(id_array),
    }, function(response) {
        add_content(response);
    });

我正在运行所有图像以获取其ID，然后将json发送到php以执行SQL查询：

SELECT * FROM table WHERE id NOT IN (json, ids, right,here) ORDER BY rand() LIMIT 20

问题是如果屏幕上有1000张图像并添加更多图像，那么

WHERE id NOT IN (1000, items)

会很慢，对吧？

我如何才能提高这种性能，因为它有时候很滞后，显然没有优化？

Answer 1

我不知道这是否是最佳做法，但我想到只需将图像路径提取到数组中，使用shuffle()并将其存储在会话变量中。然后，您可以使用array_slice()为每个后续请求返回部分内容。

Answer 2

如果您在页面加载时显示20个图像，则在页面加载时拉出前20个记录。然后将其显示在您的页面上。之后，当用户向下滚动并到达页面底部时，您可以再次为接下来的20条记录执行ajax调用，依此类推。当用户到达不存在更多记录的点时，不再调用ajax。

通过这种方式，您可以优化代码并拉动20条记录，然后提取60条记录。

希望这个想法可以帮助您以更好的方式加快页面加载速度。

最佳实践ajax随机加载更多图像（内容）

2 个答案: