Question

我正在使用jQuery .html来动态更改html div的内容。加载新内容时会出现闪烁。看起来闪烁是由于页面的下半部分上升以填充我正在更新的div。换句话说，看起来行为是：

将div的html设置为null
渲染页面（从而导致闪烁）
更新div的html
渲染页面

有没有办法摆脱闪烁？

我正在使用的完整代码如下所示（可在jsfiddle上找到：https://jsfiddle.net/greshje/pqgjjmL4/2/）：

在此示例中，加载页面时会显示两个鼠标的图像。当按下“点击我”链接时，在出现两只小鼠的另一图像之前显示一只鼠标的图像。我希望单击链接时单个鼠标的图像不会向上移动。在我正在开发的实际代码中，我不知道传入内容在呈现之前的高度（它是一个数据表，行数会有所不同）。

<script>
    var isFirst = true;
    var updateImage = function() {
        var html = "";
        var d = new Date();
        if(isFirst == true) {
            html = "<img src='http://images.mentalfloss.com/sites/default/files/styles/article_640x430/public/pinky_primary.jpg?" + d.getTime() + "' />";
            isFirst = false;
        } else {
            html = "<img src='https://www.scrumalliance.org/system/resource_files/0000/0412/pinkyandthebrainwp2.jpg?" + d.getTime() + "' />";
            isFirst = true;
        }
        $("#image1").first().html(html);
    }
</script>

<a href="javascript:updateImage();">click me</a>

<div id="image1" align="center">
    <img src="https://www.scrumalliance.org/system/resource_files/0000/0412/pinkyandthebrainwp2.jpg" />
</div>
<br />
<br />

<div id="image2" align="center">
    <img src="http://www.jwwaterhouse.com/pntb/the_brain_t.gif" />
</div>
<br />
<br />

Answer 1

通常，有许多选项可以使更新无闪烁。最重要的两件事是：

新内容在展示时应该可用，
渲染应该在那时部分完成 - 尽可能多。

因此，我建议将图像加载到背景中，加载到图像对象或隐藏标记中，只有在加载后才能显示。这就是我的意思：

<style>
    .abs {position:absolute;left:0px;top:0px;}
</style>
<div style="position:relative">
    <img src="1.jpg" class="pic">
    <img src="2.jpg" class="pic"
        style="visibility:hidden"
        onload="this.style.visibility='visible'"
    >
</div>

此解决方案将加载图像，然后使其可见。您可以使用display：none而不是visibility：hidden，但在这种情况下，在您的图像有效显示之前，渲染不会发生。（浏览器速度足以处理这个问题，所以即使在这种情况下你也可能看不到故障 - 但是为什么在最小化问题阶段的时间时依靠它们的速度？）

此外，首先显示新内容然后然后隐藏旧内容通常要快得多，只是因为隐藏某些内容时重新渲染的内容更少。眼睛也认为它更快，但这只是一种幻觉，在某些情况下，显示两种内容都不是一种选择。

TLDR：如果你想快速交换内容，请确保新内容已经，只是隐藏。

Answer 2

更改图片的src，而不是div的整个html：

    var isFirst = true;
    var updateImage = function() {
        var src = "";
        var d = new Date();
        if(isFirst == true) {
            src = "http://images.mentalfloss.com/sites/default/files/styles/article_640x430/public/pinky_primary.jpg?" + d.getTime(); 
            isFirst = false;
        } else {
            src = "https://www.scrumalliance.org/system/resource_files/0000/0412/pinkyandthebrainwp2.jpg?" + d.getTime();
            isFirst = true;
        }
        $("#image1 img").prop("src", src);
    }

你也没有帮助自己拥有两个具有相同ID的div。应该是独一无二的。

Answer 3

这使用jQuery .html（html）调用更新div并消除闪烁（在jsfiddle上可用：https://jsfiddle.net/evzmjcen/4/）。

<script>

    var isFirst = true;

    var imageLoaded = function() {
        // set the min height of the visible div to its current height
        $("#image1").css("min-height", $("#image1").height());
        // update the onload (otherwise there's an infinite loop here)
        $("#hiddenImage1").find("img").each(
                function (index, value) {
                    $(value).attr("onload", "");
                }
        );
        // update the visible div
        $("#image1").html($("#hiddenImage1").html());
        // update the height of the visible div to reflect the new size
        $("#image1").css("min-height", 0);
        $("#image1").css("min-height", $("#image1").height());
        // set the hidden div back to empty
        $("#hiddenImage1").html("");
    }

    var updateImage = function() {
        var html = "";
        var d = new Date();
        if(isFirst == true) {
            html = "<img style=\"height:100px;\" onload=\"imageLoaded();\" id='img1' src='http://images.mentalfloss.com/sites/default/files/styles/article_640x430/public/pinky_primary.jpg?" + d.getTime() + "' />";
            isFirst = false;
        } else {
            html = "<img style=\"height:200px;\" onload=\"imageLoaded()\"  id='img2' src='https://www.scrumalliance.org/system/resource_files/0000/0412/pinkyandthebrainwp2.jpg?" + d.getTime() + "' />";
            isFirst = true;
        }
        $("#hiddenImage1").first().html(html);
    }

    var docReady = function() {
    };

    $(document).ready(docReady);

</script>

<a href="javascript:updateImage();">click me</a>

<div id="image1" align="center">
    <img style="height:200px;" src="https://www.scrumalliance.org/system/resource_files/0000/0412/pinkyandthebrainwp2.jpg" />
</div>
<br /><br />

<div id="image2" align="center">
    <img src="http://www.jwwaterhouse.com/pntb/the_brain_t.gif" />
</div>
<br /><br />

<div id="hiddenImage1" align="center" style="visibility:hidden; height:0px;"></div>
<div id="afterHiddenContent">
    This is some content that appears after the hidden div.  
</div>

使用jQuery时如何停止闪烁.html

3 个答案: