javascript - javascript 加载 javascript 然后渲染标题

Question

我有 2 个 html 标签，其中有 2 个地址。取决于您所在国家/地区的哪个位置，我希望 JavaScript 显示地址。我已经弄清楚了地理定位的 API。

但是 DOM 正在下载，并且在它下载之后运行 JS 脚本，从而显示您在图片中看到的内容。几秒钟后显示正确的地址.. 显然我不希望 DOM 被延迟，但我需要显示正确的地址。如果我在 20 个元素中有 20 个地址，div你会看到这有多不愉快

我需要根据 IP 地址显示一个地址；

有谁知道如何修复我的 JS 代码

我可能对说的 JS 行有问题

$(document).ready(function () {

$(document).ready(function() {
  $.get("https://geo.ipify.org/api/v1?apiKey=apiKey", function(data) {
    $(".region").each(function() {
      if ($(this).text() != data.location.region) {
        console.log(data.location.region);
        $(this).closest(".m-s-a").hide();
      }
      if ($(this)[0].innerHTML != data.location.region) {
        //  console.log($(this)[0]);
        $(this).closest(".section-cards").hide();
      }
    });

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header th:fragment="header(content)">
  <div class="top-header m-s-a">
    <div class="site-location">
      <div class="site-location_address">
        <a id="location-tx" href="https://www.google.com/maps/place/10939+cash,+Dallas,+TX+75247/@32.8059125,-96.8849565,,16z?hl=en" class="site-location-link" target="_blank">
          <span>4908 Cash</span>
          <span>Dallas,&nbsp;</span><span class="region">Texas</span>
          <span>&nbsp;75247</span>
        </a>
        <a class="site-location-tel" href="tel:(214)&nbsp;802-9284">[phone]</a>
      </div>
    </div>
  </div>

  <div class="top-header m-s-a">
    <div class="site-location">
      <div class="site-location_address">
        <a id="location-mi" href="https://www.google.com/maps/place/1216+Southbound+Gratiot+Ave,+Mt+Clemens,+MI+48043/@42.5818175,-82.8853717,17z?hl=en" class="site-location-link" target="_blank">
          <span>1216 Southbound Gratiot Ave,&nbsp;</span>
          <span>Mt. Clemens,&nbsp;</span><span class="region">Michigan</span>
          <span>&nbsp;48043</span>
        </a>
        <a class="site-location-tel" href="tel:(586)&nbsp;738-6223">[phone]</a>
      </div>
    </div>

  </div>

  <nav th:insert="fragments/nav.html :: nav"></nav>
  <th:block th:replace="${content}" />
</header>

标签： javascriptjquery