Question

我正在建立一个允许用户上传图片，GIF和视频的网站。在主页上我想要一个人们上传的文件列表，最好是基于受欢迎程度，但我还没有那么远。首次加载页面时，我希望根据用户的屏幕分辨率显示一定数量的文件。在加载更多文件之前，用户可以向下滚动一些内容。我现在的代码是这样的：

<article class="item thumb" data-width="282">
     <h2><?php echo $file_title;?></h2>
     <a href="<?php echo $randomImage ?>"><img src="<?php echo $randomImage ?>" alt=""></a>
</article>
<article class="item thumb" data-width="384">
     <h2><?php echo $file_title;?></h2>
     <a href="<?php echo $randomImage ?>"><img src="<?php echo $randomImage ?>" alt=""></a>
</article>

这样做总共8次。当用户滚动时，如何让页面请求更多标签...就像Facebook在向下滚动时加载更多内容一样？对不起，如果我不解释这个。

Answer 1

你应该看一下window.onscroll事件，在这里你可以挂钩当有人滚动页面上的窗口时要调用的函数。然后，如果需要加载更多内容，您可以做出决定。

与往常一样，MDN有一些关于此的文档。看看这个 https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll

Answer 2

我在我的网页上使用这种方法，在那里我检查用户是否几乎滚动到页面底部（从底部200px）然后我将一些数据添加到现有元素。

我有一个DIV（#main），我在那里读取最后一个条目的ID，然后将此ID传递给AJAX页面并添加更多具有更高ID的条目。

$(document).ready(function() {

// Check if we have scrolled to the bottom (trigger 200px from bottom)
$(window).scroll(function() {   
  if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {

    // Get the ID on the last DIV
    var lastDiv = $("#main").find("div:last");
    var lastID = lastDiv.attr("id");

    // Get the new weblog
    ajaxGet(lastID);
  }
});


// ajaxSend will send all form data for processing
// -----------------------------------------------
function ajaxGet (id) {
  $.ajax({
    url: "weblog_ajax.php",
    type: "get",
    data: { wid : id },
    async: false
  }).done(function(data) {
    $("#main").append(data); // append a new DIV
  }).fail(function(data) {
    // do something if it fails
  }).always(function(data) {
    // always do something
  });

} // function ajaxSend

});

以用户滚动方式生成更多文章

2 个答案: