如何知道浏览器页面是否在Vue.js项目中加载？

Question

如何知道浏览器页面是否在Vue.js项目中加载？

在浏览器中，例如在Chrome中，如果我们打开一个页面，如果网络没有完成，就会有一个圆圈动画。

但在我们的开发中，我们如何才能获得这种状态？

Answer 1

您可以使用简单Javascript

执行此操作

<div class="docs-example-viewer-body custom-search" *ngIf="showSearch">
  <select class="search-dropdown">
    <option value="1">All</option>
    <option value="2">Brand</option>
    <option value="3">Molecule</option>
  </select>
  <app-auto-complete [mySearchData]="mySearchData" (onchange)="onchange($event)" (onsearchKey)="getOnsearchkey($event)"></app-auto-complete>
  <i class="material-icons">search </i>
</div>

返回值：一个字符串，表示当前文档的状态。

五个值中的一个：

• 未初始化 - 尚未开始加载
• loading - 正在加载
• 已加载 - 已加载
• interactive - 已加载足够且用户可以与之交互
• 完成 - 满载

有关详细信息，请访问W3Schools - document.readystate。

希望这能解决您的问题。

Answer 2

我认为您要搜索的是javascript / HTML onLoad()事件。 在加载页面时调用它，作为HTML标记可以添加函数 加载页面后将执行的调用，Javascript也可以在其中创建一个eventListener来调用同一事件后的函数。

以下是一个有用的链接：OnLoad W3School

Answer 3

Window.onload（）方法检测页面何时加载。这可能会有所帮助

How do I detect when a web page is loaded?