How do I wait for an element to be displayed/seen by the user? I have the following function, but it only checks to see if the element exists and not whether it is visible to the user.

function waitForElementDisplay (selector, time) {
    if (document.querySelector(selector) != null) {
        return true;
    } else if (timeLimit < timeSince) {
        return false;
    } else {
        timeSince += time;
        setTimeout(function () {
            waitForElementDisplay(selector, time, timeLimit, timeSince);
        }, time);
    }
}

How do I wait for an element to be displayed/seen by the user? I have the following function, but it only checks to see if the element exists and not whether it is visible to the user.

function waitForElementDisplay (selector, time) {
    if (document.querySelector(selector) != null) {
        return true;
    } else if (timeLimit < timeSince) {
        return false;
    } else {
        timeSince += time;
        setTimeout(function () {
            waitForElementDisplay(selector, time, timeLimit, timeSince);
        }, time);
    }
}

• javascript
• jquery

Share Improve this question Follow edited Oct 3, 2016 at 23:40 RPichioli 3,34533 gold badges2727 silver badges3131 bronze badges asked Oct 3, 2016 at 22:22 Chris HansenChris Hansen 8,6831919 gold badges9595 silver badges190190 bronze badges 4

• Possible duplicate of Detect if an element is visible – VLAZ Commented Oct 3, 2016 at 22:23
• There is also another thing on it here and here – VLAZ Commented Oct 3, 2016 at 22:25
• 3 define "visible to user" .. can be interpreted several ways – charlietfl Commented Oct 3, 2016 at 22:26
• Possible duplicate of How to tell if a DOM element is visible in the current viewport? – Dekel Commented Oct 4, 2016 at 11:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

It's a bit confuse, are you trying a simple "sleep"?

You can wait element load using:

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

Some working snippet, run it:

// 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);
}

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

<div id="my_element"></div>

If you want to wait time as you have set to the function and the selector which should appear after this time.. You can mind about a simple setTimeout() and CSS.

Run the example below, hope it helps:

// 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);
  }
}

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

<div id="my_element"></div>

You could use jQuery .ready()

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