内容更改时jquery刷新div

Question

我有index.php和images.php。我想要的是index.php上的某个div自动从images.php获取内容，并在images.php上出现新内容时刷新。我目前有这个：

$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
    $('#images').load('images.php');
}, 500);
});

这样可以正常工作，但是每隔.5s刷新一次我不想要的div，我想让它检测新内容何时插入images.php然后加载。

但问题是，在images.php上我有一些时间戳（1分钟前等）。并且jQuery将检测到这些变化然后刷新。

有没有办法在images.php页面上计算图像标签的数量（<img>），并将它们与index.php页面上div中的图像标签数量进行比较，然后如果它们不相等，刷新index.php上的div。

Answer 1

简短的回答是 - 不。

您应该明白，您的代码和客户端都有服务器端。每当浏览器发送请求时，它都会获得一个格式化的html页面（不是要执行的php脚本）并获取所有嵌入的资源（图像，css，js文件等）。

之后，客户端（浏览器）和服务器（您的Web服务器）之间没有进行任何通信。为了获得更新的'images.php'页面，您需要从服务器向所有浏览器发送通知，这些浏览器当前正在查看您的页面（您不知道 - 您需要与它们建立固定连接，但是html协议是无状态意味着没有简单的方法来完成它。）

因此，最简单的方法是及时安装浏览器ping服务器 - 每隔n秒。但是，最好每隔n秒获取一次图像，但最后一次更改日期 - 并且当它有更新的更改日期时有一些逻辑来获取新数据 - 这会减少应用程序发送的流量。 / p>

Answer 2

var imageWrapper = $('#images'),
    imageCount = $imageWrapper.find('img').length;

setInterval(function() {
    $.get('images.php', function (html) {
        html = $(html);
        if ( html.find('img').length > imageCount ) {
            $imageWrapper.html( html );
        }
    });
}, 500);