setIntervalページの更新時にリンクされたイメージが点滅するのを止めるには

Question

画像/メディアファイルへのhrefリンクを持つテーブルがあります。私のページが更新されると、setInterval関数中にイメージ[media]が点滅します。それ以外は問題ありません。私はこれをどうやって止めますか？

PHPコード

<?php 

include("../lib/config.php"); 
$conn=mysqli_connect("$dbhost","$dbuser","$dbpass","$dbname"); 
    $result = mysqli_query($conn, " SELECT name, message, time, media FROM message ORDER BY ID DESC"); 
    mysqli_close($conn); 

    while($row = mysqli_fetch_array($result)) { 
     echo "<tr>"; 
      echo "<td>" . $row['name'] . "</td>"; 
      echo "<td>" . $row['message'] . "</td>"; 
      echo "<td>" . $row['time'] . "</td>"; 
      //echo "<td>" . $row['media'] . "</td>"; 
      echo "<td><a href=\"" . $row['media'] . "\" target=\"_blank\" alt=\"Media not available\"> <img src=\"" . $row['media'] . "\" height=\"50\" ></a></td>";        
     echo "</tr>"; 
    } 
?> 

JSコード

<script type="text/javascript"> 
    setInterval(function(){ 
     $.get("../pageLinks/messageOne.php" , function(result){ 
     $("#testMessageOne").html(result); 
     }); 
    }, 20000); 
</script> 

Answer 1

ブラウザで画像のレンダリングやダウンロード時に発生するフリッカを防ぐために、DOMに挿入する前に画像がロードされていることを確認する必要があります。

フリッカーデモ：あなたは一度、すべての画像（複数可）DOMへの挿入をトリガするために、あなたの要求されたコンテンツの画像（複数可）を見つけ、loadイベントを追加する必要がありますhttps://jsfiddle.net/v8z5bvL2/

。これを行うには、読み込みが完了しました。

欠点は、画像の読み込みが完了するまでコンテンツが更新されないことです。

アンチフリッカーデモ：https://jsfiddle.net/g7m1au40/

setInterval(function(){ 
    $.get("../pageLinks/messageOne.php" , function(result){ 
     var result = $(result); 
     var img = result.find('img'); 
     var imgCount = img.length; //count images in the content 
     var imgLoaded = 0; 
     img.on('load', function() { 
      if (imgCount === 0 || imgLoaded++ === imgCount) { 
       //the images have finished loading, display the content. 
       $("#testMessageOne").html(result); 
      } 
     }); 
    }); 
}, 20000); 

Answer 2

これはあなたの問題を修正する場合は見ることができますか？それは何

setInterval(function(){ 
    $.get("../pageLinks/messageOne.php" , function(result){ 
    var $html = $(result); 
    $("#testMessageOne").replaceWith($html); 
    }); 
}, 20000); 

それが文書に追加されます前にHTMLを解析です。 jqueryオブジェクトは、ページにプッシュされる前に有効なDOMオブジェクトに変換します。
これは、コンテンツが消去された後でページをHTML解析する必要がないことを意味します。コンテンツを一気に高速に更新でき、1つのフレーム内でうまくいけば1回のjavascript呼び出しで描画できます。