等待元素显示给用户

Posted 2023-02-21

【中文标题】等待元素显示给用户

【英文标题】：Wait for element to be displayed to user

【发布时间】：2017-02-11 23:18:45

【问题描述】：

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

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

【问题讨论】：

Detect if an element is visible的可能重复

上面还有here和here

define "对用户可见" .. 可以有多种解释方式

How to tell if a DOM element is visible in the current viewport?的可能重复

【参考方案1】：

有点迷糊，你是在尝试简单的“睡眠”吗？

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

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

一些工作的sn-p，运行它：

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

【参考方案2】：

你可以使用 jQuery .ready()

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