如何停止setInterval頁面上閃爍的鏈接圖像更新

Question

我有一張表，其中有一個href鏈接到圖片/媒體文件。當我的頁面更新圖像時[媒體]在setInterval函數中閃爍。其他一切都很好。我將如何阻止這種情況發生？

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之前，您需要確定圖像是否已加載，以防止瀏覽器呈現/下載圖像時引起的閃爍。

閃爍演示：https://jsfiddle.net/v8z5bvL2/

要做到這一點，你需要找到的圖像（S）在您的請求的內容，並添加一個load事件來觸發插入到DOM一旦所有的圖像（S）已完成加載。

不利之處在於內容在圖像加載完成之後纔會更新。

防閃爍演示：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解析，並且應該能夠更快地更新內容，並且希望在一幀畫面內進行，因爲它全部在一個javascript調用中。