能否预渲染Bootstrap Popover的HTML内容解决iframe加载延迟？

问题核心：Bootstrap Popover默认会在触发弹出时才将内容DOM插入页面，所以你设置的loading="eager"根本没机会生效——iframe还没被添加到DOM树里，自然不会开始加载。

直接上解决方案，核心思路是提前预加载iframe，让它在页面加载时就开始加载，popover弹出时直接复用已加载好的内容：

步骤1：添加预加载的隐藏容器 #

在HTML里加一个隐藏的div，用来放预加载的Google Maps iframe：

<!-- 预加载地图iframe的隐藏容器 -->
<div id="preloaded-map" style="display: none;">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6045.235079714123!2d-73.98566439999999!3d40.7484405!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1758565723400!5m2!1sen!2sus" 
          style="width:100%;height:100%;border:0;" 
          allowfullscreen="" 
          loading="eager">
  </iframe>
</div>

步骤2：修改Popover初始化逻辑 #

不再直接把iframe写在content里，而是引用预加载的容器内容：

$(window).on("load", function() {
  populateMapPopover();
});

function populateMapPopover() {
  $("#maps_nav_a").popover({
    customClass: 'map-popover',
    trigger: 'hover',
    html: true,
    container: "body",
    sanitize: false,
    // 直接复用预加载的地图内容
    content: function() {
      return $("#preloaded-map").html();
    }
  });
}

// 注：原代码中initializePopovers与jQuery的popover初始化重复，保留其一即可

步骤3：调整CSS确保显示正常 #

保持原有CSS，确保popover尺寸适配iframe：

#navbar {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    font-size: large;
}

.nav-link svg {
    transition: stroke .15s ease-in-out, color .15s ease-in-out
}

.nav-link:hover svg {
    stroke: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 0.75)) !important;
}

.map-popover {
    max-width: 800px;
    width: 300px;
    height: 300px;
}

.map-popover .tooltip-arrow {
    --bs-tooltip-bg: var(--bs-white);
}

额外优化点 #

如果担心预加载iframe阻塞首屏，可以在页面加载完成后再设置iframe的src：

$(window).on("load", function() {
  // 首屏加载完成后再启动地图加载
  $("#preloaded-map iframe").attr("src", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6045.235079714123!2d-73.98566439999999!3d40.7484405!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1758565723400!5m2!1sen!2sus");
  populateMapPopover();
});

这样修改后，iframe会提前完成加载，用户触发popover时就能立即显示地图，不会有延迟感。

内容的提问来源于stack exchange，提问作者br441