关于在 iframe 中显示 googlemap 时的加载时机

Question

我在我的网站上的 iframe 中显示谷歌地图。

我希望它在 iframe 元素显示在视图中之前完成加载，但是当我设置

[loading="eager"] 

时它不起作用。

在 iframe 中显示 googlemap 时是否无法设置

 [loading="eager"]

？

如有任何替代方案，我们将不胜感激。

※抱歉我的英语不好，因为我正在使用翻译。

我在iframe上设置了loading =“eager”，但它是在元素到达视图时加载的。 我希望在到达描述 iframe 的元素之前完成加载。

Answer 1

loading="eager"

属性通常会被浏览器的优化覆盖，尤其是对于 Google 地图等外部内容。

以下是您可以进行的一些尝试：

1. 使用 JavaScript 进行延迟加载

<script>
    window.addEventListener('load', function () {
        const iframe = document.getElementById('googleMap');
        iframe.onload = function () {
            document.getElementById('map-container').style.display = 'block';
        };
    });
</script>

<style>
    #map-container {
        display: none;
    }
</style>

<div id="map-container">
    <iframe
        id="googleMap"
        src="https://www.google.com/maps/embed?pb=..."
        width="600"
        height="450"
        style="border:0;"
        allowfullscreen=""
        loading="eager">
    </iframe>
</div>

2. 使用路口观察器

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const mapContainer = document.getElementById('map-container');
        const iframe = document.getElementById('googleMap');
        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    iframe.src = "https://www.google.com/maps/embed?pb=..."; // Set the src to start loading
                    iframe.onload = function () {
                        mapContainer.style.display = 'block';
                    };
                    observer.disconnect(); // Stop observing once loaded
                }
            });
        });

        observer.observe(mapContainer);
    });
</script>

<style>
    #map-container {
        display: none;
    }
</style>

<div id="map-container">
    <iframe
        id="googleMap"
        width="600"
        height="450"
        style="border:0;"
        allowfullscreen=""
        loading="lazy">
    </iframe>
</div>

参考：https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API