关于javascript：等待元素显示给用户

Wait for element to be displayed to user

如何等待用户显示/查看元素？我有以下函数，但它只检查元素是否存在，而不检查它是否对用户可见。

1
2
3
4
5
6
7
8
9
10
11
12

相关讨论

有点困惑，你在试着简单的"睡眠"吗？

您可以使用以下方法等待元素加载：

1
2
3

document.querySelector(selector).onload = function() {
// Your code ...
}

一些工作片段，运行它：

1
2
3
4
5
6
7

// Triggering load of some element
document.querySelector("body").onload = function() {
// Setting the timeout and visible to another element
setTimeout(function () {
document.querySelector("#my_element").style.display ="block" /* VISIBLE */
}, 1000);
}

号

1
2
3
4
5
6

#my_element{
width: 100px;
height: 100px;
background-color: red;
display: none; /* INVISIBLE */
}

。

如果您希望等待time，因为您已经设置了函数和selector，它应该出现在该time之后。你可以考虑一个简单的setTimeout()和css。

运行下面的示例，希望它有帮助：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// Triggering, in my exemple i've used: WINDOW ONLOAD
window.onload = function() {
waitForElementDisplay("#my_element", 1000);
}

function waitForElementDisplay (selector, time) {
// Check the DOM Node in console
console.log(document.querySelector(selector));

// If it's a valid object
if (typeof document.querySelector(selector) !=="undifined") {

// Setting the timeout
setTimeout(function () {
document.querySelector(selector).style.display ="block" /* VISIBLE */
}, time);
}
}

1
2
3
4
5
6

#my_element{
width: 100px;
height: 100px;
background-color: red;
display: none; /* INVISIBLE */
}

。

您可以使用jquery.ready()。

1
2
3

selector.ready(function(){
// do stuff
})