Подождите, пока элемент не будет отображаться пользователю

Question

Как подождать, пока элемент будет отображаться/просматриваться пользователем? У меня есть следующая функция, но она проверяет только, существует ли элемент, а не видна ли она пользователю.

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

Answer 1

Немного смущает, вы пробовали простой «сон»?

Вы можете ждать элемент нагрузки с помощью:

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

Некоторые рабочие сниппет, запустите его:

// 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>

Если вы хотите ждать time, как вы установили на и selector, который должен появиться после этого time .. Вы можете возражать против из простых setTimeout() и CSS.

Запустите пример ниже, надеется, что это помогает:

// 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>

Answer 2

Вы можете использовать JQuery .ready()

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