2

我有一个自定义幻灯片页面，其中包含数百张大图片的标记。此外，还有一个布局调整，单靠 CSS 无法完成，需要 javascript。该调整取决于几个页面元素的计算 CSS 样式。

这是问题所在：获得计算的 CSS 样式(document).ready似乎不起作用。这很有意义，因为当仅注册 DOM 时，还没有发生布局/绘制。

(window).load是显而易见的答案。但在这种情况下，等待时间(window).load长得令人抓狂，因为下载所有 100 多张大图像实际上需要 30 秒（在慢速连接上更长！）。原则上这对幻灯片来说很好，因为一旦加载了前两个图像，幻灯片就开始可用，早在加载所有图像之前。问题是，我希望脚本化的 CSS 布局更正也发生在那个时候。

为了检查正在加载的 imgs，我使用了 imageLoaded，这很棒，并且在load与 imgs 一起使用时解决了 jquery 事件的问题。但是如何检查页面元素（例如 div）上的“加载”类事件（以及计算样式的可用性）？（我意识到 div 不会触发加载事件。）原则上，两者之间是否存在可靠的跨浏览器 DOM 事件，(document).ready并且(window).load我可以在一组特定元素上侦听以获取计算样式？还是我被迫在这两个时间极端之间做出选择？

4

3 回答 3

3

在 CSS 加载时

来源： https ://stackoverflow.com/a/12570580/1292652

向要检查的 CSS 文件添加唯一的参考样式，如下所示：

#ensure-cssload-0 {
  display: none;
}

然后，使用 JS 函数 ,cssLoad()反复检查 CSS 是否已下载（不确定这是否与实际绘制/渲染 CSS 时有显着差异）：

var onCssLoad = function (options, callback) {
    var body = $("body");
    var div = document.createElement(constants.TAG_DIV);
    for (var key in options) {
        if (options.hasOwnProperty(key)) {
            if (key.toLowerCase() === "css") {
                continue;
            }
            div[key] = options[key];
        }
    }

    var css = options.css;
    if (css) {
        body.appendChild(div);
        var handle = -1;
        handle = window.setInterval(function () {
            var match = true;
            for (var key in css) {
                if (css.hasOwnProperty(key)) {
                    match = match && utils.getStyle(div, key) === css[key];
                }
            }

            if (match === true) {
                window.clearTimeout(handle);
                body.removeChild(div);
                callback();
            }
        }, 100);
    }
}

您可以将其用作：

onCssLoad({
    "id": <insert element CSS applies to>,
     css: <insert sample CSS styles>
}, function () {
    console.log("CSS loaded, you can show the slideshow now :)");
});


关于 CSS 计算

来源： http ://atomicrobotdesign.com/blog/javascript/get-the-style-property-of-an-element-using-javascript/

先前的解决方案仅告诉 CSS 文件是否已被'downloaded'，而在您的问题中您提到您需要知道元素的样式何时已被'computed'或'rendered'或'painted'。我希望这可以解决这个问题。

向要检查的 CSS 文件添加唯一的参考样式，如下所示：

#ensure-cssload-0 {
  ignored-property: 'computed';
}

现在，使用getPropertyValueandgetComputedStyle来检查 CSS：

function getStyle(elem, prop) {
    return window.getComputedStyle(elem, null).getPropertyValue(prop);
}

现在，只需使用while带有回调的循环：

function checkStyle(elem, prop, callback) {
    while ( getStyle(elem, prop) !== 'computed' ) {
        // see explanation below
    }
    callback()
}

由于JavaScript 没有pass语句（就像在 Python 中一样），我们使用空代码块。

如果您想检索应用于元素的所有CSS 样式（警告：这也会显示继承的样式），请查看这个 SO answer。


避免 while() 循环

通常不建议使用 while 循环检查任何内容，因为它挂起浏览器不让 JavaScript 线程做任何其他事情（现在所有的浏览器都是多线程的，参见这个漫画）。

这是Chuck 建议的，这个解决方案要好得多：

function checkStyle(elem, prop, callback) {
    if ( getStyle(elem, prop) !== 'computed' ) {
        // see explanation below
        window.setTimeout( function() {checkStyle(elem, prop, callback);}, 100 )
    } else {
        callback()
    }
}

这要好得多。现在该函数每 100 毫秒异步检查一次（您可以根据需要更改此值）。在设置超时时包装函数是必要的，因为setTimeout()还不允许传递任何参数。

希望这有帮助。有关更多链接，请参阅这篇文章的源代码...

于 2012-09-26T18:26:02.630 回答
1

您可以使用 DOMContentLoaded 事件。它在 dom 树准备好并应用样式时触发。window.load 在加载所有图像和脚本时触发。

如果你使用 jQuery，你可以使用这个：

$(function(){
 // this fn not waiting for images
  $('.selector-class')[0].style ;// this is your computed style OR...
  $('.selector-class').css(); // json representation of style;
});

如果页面上没有 jQuery ...在现代浏览器中，您可以使用以下代码：

document.addEventListener( "DOMContentLoaded", function(){
  var computedStyle = document.querySelector('#yourElementId').style ; 
})

YatharthROCK在下面添加了非常精确的解决方案。

于 2012-09-26T18:33:05.663 回答
0

我的另一个答案 仅在下载CSS 文件时告诉您，而在您的问题中您提到您需要知道元素的样式何时被计算或渲染或绘制-已经更新。

我希望这能解决这个问题（我不想将它与另一个答案合并，因为我觉得它从不同的角度攻击......） 我改变了主意，请参阅编辑。

来源： http ://atomicrobotdesign.com/blog/javascript/get-the-style-property-of-an-element-using-javascript/

向要检查的 CSS 文件添加唯一的参考样式，如下所示：

#ensure-cssload-0 {
  ignored-property: 'computed';
}

现在，使用getPropertyValueandgetComputedStyle来检查 CSS：

function getStyle(elem, prop) {
    return window.getComputedStyle(elem, null).getPropertyValue(prop);
}

现在，只需使用while带有回调的循环：

function checkStyle(elem, prop, callback) {
    while ( getStyle(elem, prop) !== 'computed' ) {
        // see explanation below
    }
    callback()
}

由于JavaScript 没有pass语句（就像在 Python 中一样），我们使用空代码块。

如果您想检索应用于元素的所有CSS 样式（警告：这也将显示继承的样式），请查看此 SO 答案

于 2012-09-26T19:02:06.993 回答