如何确定浏览器何时完成绘制插入元素？

Question

如何确定浏览器何时完成绘制插入元素？

我有一个网页,注入通过AJAX传递的HTML.我不知道,先验,内容的大小,但我需要根据其大小在页面上定位内容.这是一个不起作用的简单方法:

将父容器的不透明度设置为0.
将内容插入DOM.
测量尺寸,例如$el.outerWidth(true).
根据这些尺寸定位内容.
将父容器的不透明度(后退)设置为1.0.

这种方法的问题在于内容非常复杂并且包括图像.当outerWidth()被调用时,浏览器尚未完成重绘屏幕,以便返回的大小是不准确的.(有趣的是,在我的情况下,初始尺寸总是远远大于最终值,而不是我预期的0.)

我可以通过在步骤2和3之间设置一个计时器来减少这个问题,但无论我多长时间制作计时器,某些系统上肯定会有一些浏览器会超过它.如果我让计时器足够长以覆盖大多数情况,那将通过引入不必要的延迟来惩罚使用更快系统的用户.虽然下面提到的一些答案表明a setTimeout(fn, 0)已足够,但我发现情况并非如此.我在2012年的MacBook Air上测量的喷涂时间高达60毫秒,下面的一个答案表明500毫秒.

看起来Mozilla曾经有过一个可能解决了我的问题的onPaint事件 ......如果它仍然存在并且其他浏览器已经采用了它.(两种情况都不是这样.)并且变异观察者在报告元素变化时似乎没有说明绘画时间.

非常感谢解决方案或评论.如下所述,之前已经提出过这个问题,但大多数问题都至少有一年之久,我很想再试一次.

遗憾的是,相关问题没有提供可行的答案

更新:嗯,似乎根本没有针对这个问题的通用解决方案.在我的特定情况下,我发现一个属性在内容加载和布局完成后可以可靠地更改.JavaScript轮询此属性的更改.一点也不优雅,但这是我能找到的最佳选择.

Answer 1

Rai*_*mer -1

您可以看看窗口加载是否可以解决问题。我不确定加载新内容时它是否会多次触发。

但对于图像，你可以使用这样的东西。

//匹配图像加载完成后调用函数

function imagesLoadedEvent(selector, callback) {
    var This = this;
    this.images = $(selector);
    this.nrImagesToLoad = this.images.length;
    this.nrImagesLoaded = 0;

    //check if images have already been cached and loaded
    $.each(this.images, function (key, img) {
        if (img.complete) {
            This.nrImagesLoaded++;
        }
        if (This.nrImagesToLoad == This.nrImagesLoaded) {
            callback(This.images);
        }
    });

    this.images.load(function (evt) {
        This.nrImagesLoaded++;
        if (This.nrImagesToLoad == This.nrImagesLoaded) {
            callback(This.images);
        }
    });
}

$("#btn").click(function () {
    var c = $("#container"), evt;
    c.empty();
    c.append("<img src='" + $("#img1").val() + "' width=94>");
    c.append("<img src='" + $("#img2").val() + "' width=94>");
    c.append("<img src='" + $("#img3").val() + "' width=94>");
    evt = new imagesLoadedEvent("img", allImagesLoaded);
});

function allImagesLoaded(imgs) {
    //this is called when all images are loaded
    //console.log("all " + imgs.length + " images loaded");
}

Run Code Online (Sandbox Code Playgroud)

用于加载图像的js小提琴

归档时间：	12 年，6 月前
查看次数：	3311 次
最近记录：	12 年，5 月前