콘텐츠가 변경 될 때 jquery refresh 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, 나는 그것이 새로운 콘텐츠가 images.php에 삽입 된 경우 다음 감지에로드 할 DIV 새로 고침

하지만, images.php에 타임 스탬프 (1 분 전 등)가 있습니다. 그리고 jQuery는 변경 사항을 변경 사항으로 감지하고 새로 고침합니다.

images.php 페이지에서 이미지 태그 수 (<img>)를 계산하고 index.php 페이지에서 div의 이미지 태그 수와 비교 한 다음 일치하지 않는 경우 index.php에서 div를 새로 고칩니다.

Answer 1

짧은 대답은 - 아니요.

코드와 클라이언트 측의 서버 측이 있다는 것을 이해해야합니다. 브라우저가 요청을 보낼 때마다 형식화 된 HTML 페이지 (실행하는 PHP 스크립트가 아님)를 가져오고 모든 임베디드 리소스 (이미지, CSS, JS 파일 등)를 가져옵니다.

그런 다음 클라이언트 (브라우저)와 서버 (웹 서버)간에 통신이 이루어지지 않습니다. 업데이트 된 'images.php'페이지를 얻으려면 서버에서 현재 귀하의 페이지를보고있는 모든 브라우저로 알림을 보내야합니다 (모르는 경우 - 고정 된 연결이 필요하지만 html 프로토콜은 무국적이므로 쉽게 달성 할 수 있습니다.

가장 쉬운 방법은 브라우저 핑 서버를 적시에 (n 초마다) 사용하는 것입니다. 하지만 n 초마다 모든 이미지가 아닌 마지막 변경 날짜를 가져 오는 것이 더 나을 것입니다. 새로운 변경 날짜가있을 때 새 데이터를 가져 오는 논리가 있어야 응용 프로그램에서 보내는 트래픽 양이 줄어 듭니다.

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