从 ajax 更新 div 内容时闪烁和闪烁答案

【问题标题】：blinking and flicker when updating div contents from ajax从 ajax 更新 div 内容时闪烁和闪烁
【发布时间】：2013-12-10 23:16:48
【问题描述】：

我正在从服务器获取数据。数据包含许多图像和一些其他 html 元素。当用服务器响应替换 div 的内容时，它总是在 div 内闪烁。

$('#div').html(serverResponse);

我也按照这个方法：How to avoid blinking when updating page from ajax 但它仍然在闪烁

如何防止闪烁。

【问题讨论】：

你说眨眼是什么意思？我试图弄清楚问题是在您将它们放入 HTML 之后加载的图像之一还是其他问题？您的图像是否在图像标签中指定了高度和宽度，以便在加载图像之前知道它们的大小？
意思是，它显示出来就像重新加载带有图像和内容的div部分。
服务器响应是这样的：服务器发送一个包含一个主div和几个小div的html。小 div 包含图像。现在收到响应后，我正在替换 $('#div').html(serverResponse)。但它以这样一种方式显示图像正在重新加载，就像它需要时间、闪烁和闪烁一样。
我认为您必须向我们展示serverResponse 中的 HTML，以便我们了解如何解决它。如果您在所有图像上都设置了高度和宽度属性，这将导致加载图像时移动的东西要少得多。
serverResponse中的HTML很长，这里不能发。我可以给你发电子邮件。是的，我已经为所有图像设置了高度和宽度，是否需要设置宽度和高度？

标签： jquery html ajax

【解决方案1】：

你可以先隐藏'#div'，等到所有images都加载完毕，再显示'#div'。

$.ajax({
    url: '',
    success: function (serverResponse) {
        $('#div').html(serverResponse).hide();

        var $imgs = $('#div img'), //all images inside '#div'
            len = $imgs.length, 
            imgs_loaded = 0;

        $imgs.load(function(){
            imgs_loaded++;
            if(imgs_loaded == len){
                $('#div').show();
            }
        });
    }
});

【讨论】：

我在您的评论中看到您有一个“一个主 div”，也许最好隐藏显示该 div。 $('#div').html(serverResponse).find('one main div').hide();
非常感谢。您的解决方案是完美的工作。再次感谢。我现在创建了两个 div。根据您的解决方案将服务器响应放在隐藏的 div 中，当它完全加载时，我隐藏一个 div 并显示这个隐藏的 div。
优秀的答案...+1