image flicker ajax polling

В настоящее время я использую опрос ajax, чтобы периодически получать новые данные из базы данных и показывать их пользователю. Он отлично работает, за исключением случаев, когда изображения начинают мигать, а затем мерцание внезапно останавливается. Вот JavaScript, который извлекает данные:image flicker ajax polling

function loadLog(){  
    $.ajax({ 
     url: "stream.php", 
     cache: false, 
     success: function(html){ 
$("#inner").html(html);   
     } 
    }); 
} 
setInterval (loadLog, 2500);

файл stream.php содержит основные команды SQL, которые проверяют базу данных для новых данных. Таким образом, эти команды вызывается каждые 2,5 секунды. Если тип сообщения является изображением, он сопровождается выражением, например: user_name отправил новое изображение, xseconds ago. Заявления никогда не мерцают вообще, но изображение делает. Есть ли способ остановить мерцание изображения? (Интересно, что если в базе данных уже есть образы, тогда только мерцание только что появившихся изображений, тогда как старых изображений нет. Поэтому, если в общей сложности 3 изображения, два старых и один новый, новый мерцает, тогда как другие не делают, несмотря на то, что весь сценарий опрошен, а не конкретные изображения.)

источник

2013-02-21 Anonymous

Я работаю над той же проблемой, поскольку последние несколько дней, и я закончил в следующем примере кода.

Что вам нужно пройти последнее обновление time-stamp для нового запроса и в соответствии с этим time-stamp найти запись между прошедшим time-stamp и текущей time-stamp.

Index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>testing comet</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <link rel="stylesheet" href="css/style.css" /> 
     <script type="text/javascript" src="js/jquery.js"></script> 
    </head> 
    <body> 

    <div id="content"></div> 

<script type="text/javascript"> 

    var Comet = function (data_url) 
    { 
     this.timestamp = 0; 
     this.url = data_url; 
     this.noerror = true; 

     this.connect = function() 
     { 
      var self = this; 

      $.ajax(
      { 
       type : 'post', 
       url : this.url, 
       dataType : 'json', 
       data : 
       { 
        'timestamp' : self.timestamp 
       }, 
       success : function(response) 
       { 
        self.timestamp = response.timestamp; 
        self.handleResponse(response); 
        self.noerror = true;   
       }, 
       complete : function(response) 
       { 
        if (!self.noerror) 
        { 
         setTimeout(function(){ comet.connect(); }, 5000);   
        } 
        else 
        { 
         self.connect(); 
        } 
        self.noerror = false; 
       } 
      }); 
     } 

     this.disconnect = function() {} 

     this.handleResponse = function(response) 
     { 
      $('#content').append('<div>' + response.msg + '</div>'); 
     } 

     this.doRequest = function(request) { 
      $.ajax(
      { 
       type : 'post', 
       url : "index.php", 
       data : 
       { 
        'msg' : request, 
        'submit' : "Send" 
       } 
      }); 
     } 
    } 

    var comet = new Comet('./backend.php'); 
    comet.connect(); 
</script> 
</body> 
</html>

backend.php

<?php 

    $filename = dirname(__FILE__).'/data.txt'; 

    $msg = isset($_GET['msg']) ? $_GET['msg'] : ''; 
    if ($msg != '') 
    { 
     file_put_contents($filename,$msg); 
     die(); 
    } 

    $lastmodif = isset($_GET['timestamp']) ? $_GET['timestamp'] : 0; 
    $currentmodif = filemtime($filename); 
    while ($currentmodif <= $lastmodif) // check if the data file has been modified 
    { 
     usleep(10000); // sleep 10ms to unload the CPU 
     clearstatcache(); 
     $currentmodif = filemtime($filename); 
    } 

    $response = array(); 
    $response['msg']  = file_get_contents($filename); 
    $response['timestamp'] = $currentmodif; 
    echo json_encode($response); 
    flush(); 
?>

Все, что вам нужно сделать, это заменить txt file time modification с mysql запроса.

пример код для замены текстового файла с MySQL

<?php 
date_default_timezone_set('Asia/Kolkata'); 
$connection = mysql_connect('localhost','root','')or die(mysql_error()); 
$database = mysql_select_db('stackoverflow')or die(mysql_error()); 

function get_date() 
{ 
    $query = mysql_query("show table status from stackoverflow like 'last_update'")or die(mysql_error()); 

    $row = array(); 
    while($result = mysql_fetch_assoc($query)) 
    { 
     $row[] = $result; 
    } 

    return strtotime($row[0]['Update_time']); 
} 


$lastmodif = isset($_POST['timestamp']) ? $_POST['timestamp'] : 0; 
$currentmodif = get_date(); 

while ($currentmodif <= $lastmodif) 
{ 
    usleep(10000); 
    clearstatcache(); 
    $currentmodif = get_date(); 
} 

$query_db = mysql_query("SELECT UNIX_TIMESTAMP(last_update.created) AS DATE,last_update.* FROM last_update WHERE UNIX_TIMESTAMP(last_update.created) BETWEEN '".$lastmodif."' AND '".$currentmodif."'")or die(mysql_error()); 

$row_db = array(); 
$response = array(); 
while($result_db = mysql_fetch_assoc($query_db)) 
{ 
    $response['msg'][]  = $result_db['title']; 
} 

$response['timestamp'] = $currentmodif; 
$response['lastmodif'] = $lastmodif; 
echo json_encode($response); 
flush();

Надеется, что это поможет вам.

источник

2013-02-21 11:40:10

приятно! спасибо, это сработало для меня, из любопытства, вы знаете, почему в первую очередь мелькала новая информация? Мне бы хотелось ваше мнение. –

Я предполагаю, что это потому, что вы каждый раз заменяете HTML-файл #inner div, поэтому он повторно отображается ,

Самый элегантный подход будет только принести новые элементы (путем передачи временной метки аргумент stream.php, т.е. stream.php?timestamp=X и возвращать только элементы в фид с меткой времени, а затем .prepend();, что содержание в #inner дел.

Еще одно предложение было бы загрузить содержимое в новый, скрытый DIV, так что полностью делает, а затем быстро показать его/скрыть старый.

источник

2013-02-21 11:30:16 Dunhamzzz

Попробуйте обновить только часть #inner. Например, если изображение не имеет изменил, обновил только текст.Если изображение изменилось - замените его новым. Я думаю, что в этом случае вы не заметите мерцающего эффекта. Также посмотрите на заголовки http для этих изображений - могут быть неправильные заголовки Expires, Last-Modified и т. д. и браузер загружает одни и те же изображения несколько раз.

источник

2013-02-21 11:31:56

image flicker ajax polling

ответ

Смежные вопросы