我有一个自定义幻灯片页面，其中包含数百张标记的大图片。另外，对于布局的调整是单靠CSS无法完成的，并且需要javascript。该调整取决于几个页面元素的计算CSS样式。
问题在于：在(document).ready上获取计算的CSS样式似乎不起作用。这很有道理，因为当DOM只是注册时，布局/绘画还没有发生。
(window).load是明显的答案。但是在这种情况下，(window).load的等待时间非常长，因为对于所有要下载的100多个大图像，它需要30秒（慢速连接时间更长！）。原则上幻灯片放映很好，因为幻灯片开始在加载前两个图像后开始可用，早在 all 加载图像之前。问题是，我希望脚本化的CSS布局校正也可以在那时发生。
要检查正在加载的imgs，我使用imageLoaded，这很棒，并且在与imgs一起使用时可以解决jquery的load事件的问题。但是，如何检查页面元素上的“加载”类事件（以及计算样式的可用性），例如div？ （我意识到div不会触发加载事件。）原则上，在(document).ready和(window).load之间是否存在可以在一组特定元素上监听的可靠的跨浏览器DOM事件，得到计算样式？还是我被迫在这两个时间极端之间做出选择？
答案 0 :(得分：2)
为要检查的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 :)");
});
来源： http://atomicrobotdesign.com/blog/javascript/get-the-style-property-of-an-element-using-javascript/
之前的解决方案仅告知CSS文件是否已'已下载'，而在您提出的问题中，您需要知道元素的样式何时'计算'< / em>或'呈现'或'画'。我希望这可以解决这个问题。
为要检查的CSS文件添加唯一的引用样式，如下所示：
#ensure-cssload-0 {
ignored-property: 'computed';
}
现在，使用getPropertyValue和getComputedStyle检查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 doesn't have a pass statement（like in Python）以来，我们使用空代码块。
如果要检索所有应用于元素的CSS样式（警告：，这也将显示继承的样式），请查看this SO answer。< / p>
通常不建议使用while循环检查任何内容，因为它挂起浏览器不允许JavaScript线程执行任何其他操作（现在所有浏览器都是多线程的，请参阅this comic ）。
这是Chuck suggested，这个解决方案要好得多：
function checkStyle(elem, prop, callback) {
if ( getStyle(elem, prop) !== 'computed' ) {
// see explanation below
window.setTimeout( function() {checkStyle(elem, prop, callback);}, 100 )
} else {
callback()
}
}
这要好得多。现在该函数每隔100ms异步检查一次（如果需要，可以更改此值）。设置超时时包装函数是必要的，因为setTimeout()不允许传递任何参数。
希望这有帮助。有关更多链接，请参阅此帖子的源代码......
答案 1 :(得分：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 在下面添加了非常精确的解决方案。
答案 2 :(得分：0)
我的other answer 仅在下载的CSS文件时告诉您，而在您提出的问题中，您需要知道元素的样式何时计算或呈现或绘制 - 已更新。
我希望这能解决这个问题（我不想将其与其他答案合并，因为我觉得它攻击的角度不同......）我改变了主意，看到了编辑。
来源： http://atomicrobotdesign.com/blog/javascript/get-the-style-property-of-an-element-using-javascript/
为要检查的CSS文件添加唯一的引用样式，如下所示：
#ensure-cssload-0 {
ignored-property: 'computed';
}
现在，使用getPropertyValue和getComputedStyle检查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 doesn't have a pass statement（like in Python）以来，我们使用空代码块。
如果要检索所有应用于元素的CSS样式（警告：，这也会显示继承的样式），请查看this SO answer