内容更改时jquery刷新div

时间:2013-02-02 23:21:51

标签: javascript jquery

我有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。

2 个答案:

答案 0 :(得分:0)

简短的回答是 - 不。

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

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

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

答案 1 :(得分:0)

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);