Question

我有一个表格，其中包含指向图片/媒体文件的href链接。当我的页面更新时，图像[media]在setInterval函数期间闪烁。其他一切都很好。我怎么能阻止这种情况发生？

php code

<?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 code

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

Answer 1

在插入DOM之前，您需要确定已加载图像，以防止浏览器渲染/下载图像时出现闪烁。

闪烁演示：https://jsfiddle.net/v8z5bvL2/

要执行此操作，您需要在所请求的内容中找到图像并添加load事件，以便在所有图像完成加载后触发插入DOM。

缺点是在图像加载完成后才会更新内容。

反闪烁演示：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);

它的作用是解析附加到文档后的之前的。 jquery对象在将其推送到页面之前将其转换为有效的DOM对象这意味着页面在其内容被清除后不必进行html解析，并且应该能够更快地更新内容，并且希望在一帧绘制中，因为它全部在一个javascript电话。

如何在setInterval页面更新时停止链接图像闪烁

2 个答案: