Warten, bis das Element dem Benutzer angezeigt wird

Question

Wie warte ich auf die Anzeige/Anzeige eines Elements durch den Benutzer? Ich habe die folgende Funktion, aber es überprüft nur, ob das Element existiert und nicht, ob es für den Benutzer sichtbar ist.

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

Es ist ein bisschen verwirrend, versuchen Sie einen einfachen "Schlaf"?

Sie Elementlast warten kann mit:

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

Einige Arbeits Schnipsel, führen Sie es:

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

Wenn Sie time warten wollen, wie Sie auf die festgelegt haben Funktion und die selector, die danach erscheinen sollte time .. Sie können sich ab kümmern aus einem einfachen setTimeout() und CSS.

das Beispiel laufen unten, hoffe, es hilft:

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

Sie jQuery .ready verwenden könnte()

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