还记得使用AJAX加载的元素吗？

Question

我有一个完整的AJAX网站。在一个包含 12个元素的页面和一个自制的无限滚动（页面底部只有一个“更多”链接，加载12个下一个元素），当我点击其中一个链接时，它会加载页面。

问题

当我想回到列表（浏览器的上一个或关闭链接）和如果我加载了超过12张照片（例如全部）时，我丢失了加载的元素，我需要滚动到页面底部...加载另一个元素...点击它...加载页面...返回等等。

您知道我该怎么做才能避免这种行为并保持加载的元素进展？

我的测试

我测试了一些东西。我使用基本加载元素定义变量，并将其与新加载的元素进行比较，然后在last值高于新值的情况下运行。

last = $(".grid.photos article").length;

var newelems = $(data).find(".grid.photos article").length,
    perpage = 12,
    diff = last - newelems;

if (last > newelems){
    var times = Math.ceil(diff / perpage);
    // DO SOMETHING MAGIC
}

Answer 1

如何将哈希添加到该位置，以便有与每个州相关联的实际网址。例如

 window.location.hash = 'load12';

然后你可以从该哈希构建逻辑以查看需要加载的内容。另一个想法是使用HTML5 pushState。

Answer 2

我找到了另一个解决方案（工作！），它在网址中使用参数。

PHP（Wordpress）

$perpage = ($_GET["last"]) ? $_GET["last"] : 6;

...

"posts_per_page" => $perpage

的jQuery

// Set last position for photos list
last = $(".grid.photos article").length;

// Retrieve the position
if (last > 6)
    url += "?last=" + last;