javascript 如何知道一个元素是否被渲染？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29868977/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to know if an element is rendered?
提问by BigName
My element has transition: transform .5s
我的元素有 transition: transform .5s
then it has a separate class: transform: translatex(-100%)
然后它有一个单独的类： transform: translatex(-100%)
So what I would like to achieve is that initially, the element is positioned towards the left. At window onload,When the element is rendered, I remove the transform class, and the browser would animate the element back to its correct position.
所以我想要实现的是，最初，元素定位在左侧。 在窗口加载时，当元素被渲染时，我删除了转换类，浏览器会将元素动画回到正确的位置。
But what actually happens is that when the page becomes visible/rendered, the element is already at the correct position. and there is no animation.
但实际发生的是，当页面变得可见/呈现时，元素已经在正确的位置。并且没有动画。
I tried setTimeout(function() {}, 0);it doesn't work. If I setTimeout for 1 second, it works, but sometime rendering takes long, and I have to setTimeout for 2 seconds. But then sometimes it renders fast, and 2 seconds is a long time to wait.
我试过setTimeout(function() {}, 0);不行。如果我将超时设置为 1 秒，它可以工作，但有时渲染需要很长时间，我必须将超时设置为 2 秒。但有时它渲染得很快，2 秒是很长的等待时间。
So overall, I feel this is not a reliable or a correct way of doing this.
所以总的来说，我觉得这不是一个可靠或正确的方法。
How can I achieve what I want, the correct way?
我怎样才能以正确的方式实现我想要的？
Edit: Sorry guys, after trying to put together a demo, I realized I wasn't removing the class at window onload. This is because my element and its javascript and css are loaded with AJAX. So it can happen before the window onload or after the window onload.
编辑：对不起，伙计们，在尝试组合一个演示后，我意识到我没有在窗口加载时删除该类。这是因为我的元素及其 javascript 和 css 是用 AJAX 加载的。所以它可以在窗口加载之前或窗口加载之后发生。
Anyway, now my question is, what if the window takes a long time to load? Could it be possible that my element would be rendered before window finishes loading? Or does browsers only render when the entire window finishes loadings?
无论如何，现在我的问题是，如果窗口需要很长时间才能加载怎么办？是否有可能在窗口完成加载之前呈现我的元素？还是浏览器仅在整个窗口完成加载时才呈现？
Because I want to animate the element as soon as possible. So, is it safe to wait for window onload, in the case that window takes a long time to load(images and slow connection, and stuff)?
因为我想尽快为元素设置动画。那么，如果窗口需要很长时间才能加载（图像和慢速连接等等），等待窗口加载是否安全？
And if I load the element with AJAX after the window loads, could I immediately run the animation by removing the transform? Or should I detect for when the element is rendered?
如果我在窗口加载后使用 AJAX 加载元素，我可以通过删除变换立即运行动画吗？或者我应该检测元素何时呈现？
采纳答案by Useless Code
You might want to try using a combination of the DOMContentLoadedevent and requestAnimationFrame. DOMContentLoadedfires after the document has been completely loaded and parsed but before all of the images and other assets on the page have completed downloading. requestAnimationFramewill delay the removal of the class until after the page has been painted so the element will properly transition.
您可能想尝试结合使用DOMContentLoaded事件和requestAnimationFrame。DOMContentLoaded在文档完全加载和解析之后但在页面上的所有图像和其他资产完成下载之前触发。requestAnimationFrame将延迟类的移除，直到页面被绘制后，元素才会正确转换。
var box = document.getElementById('box'),
showBox = function (){
box.classList.remove('offscreen');
};
document.addEventListener("DOMContentLoaded", function(event) {
window.requestAnimationFrame(showBox);
});
回答by Ankit Tanna
You should use DOM Content Loaded event of javascript
您应该使用 javascript 的 DOM Content Loaded 事件
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
This will be fired only when your entire content is loaded and parsed fully by your browser.
仅当您的浏览器完全加载和解析您的整个内容时，才会触发此操作。
回答by cssyphus
Don't consider this an answer as I am sure you can find something more elegant, but this may give you some ideas.
不要认为这是一个答案，因为我相信您可以找到更优雅的东西，但这可能会给您一些想法。
Add this to the javascript AJAXed in - be sure to wrap the javascript in a document.ready:
将此添加到 javascript AJAXed in - 确保将 javascript 包装在document.ready 中：
$(function(){
var giveup = 0; //in case something goes wrong
var amirendered = 0;
while (amirendered==0){
setTimeout(function(){
if (element.length){
amirendered = 1;
$('#myElement').addClass(doTransition);
}
},200);
giveup++;
if (giveup>200) amirendered++; //prevent endless loop
}
}); //END document.ready
