谷歌地图 iframe 加载速度很慢答案

【问题标题】：Google maps iframe loading very slow谷歌地图 iframe 加载速度很慢
【发布时间】：2017-01-06 16:16:18
【问题描述】：

我在 wordpress 上写过一篇文章，并使用 google iframe 加载了 35 个国家/地区的国家地图。换句话说，我正在加载 35 个 iframe 的谷歌地图以及 100 个其他 640px 中等大小的图像。我写的文章大小约为 31 mb。

加载文章大约需要 15 秒，在移动浏览器中更糟。有时谷歌地图会导致文章内容长时间停止加载。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5662268.557666768!2d-2.2908874246415487!3d46.135220605972364!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd54a02933785731%3A0x6bfd3f96c747d9f7!2sFrance!5e0!3m2!1sen!2shu!4v1483719195954" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>

如何加快加载速度？有什么简单的方法吗？

我使用过诸如延迟加载之类的 wordpress 插件，但它只会使加载变得更糟并卡住。我非常喜欢在 wordpress 中使用超级缓存。

【问题讨论】：

你能用静态图片代替 Google Maps API 吗？
如何生成静态地图？
我的意思是截取地图并使用图像而不是实际地图。如果地图不是用来操纵的。
还有其他 iframe 的解决方案吗？

标签： wordpress google-maps iframe

【解决方案1】：

您的代码应该可以工作。我已经对此进行了测试，并且还在每个帧加载之前添加了超时，以便您可以看到更改。

var URLs = [
    'http://localhost/a.htm',
    'http://localhost/b.htm',
    'http://localhost/c.htm',
    'http://localhost/d.htm'
];

function loadNext(){

    var frameWindow = document.getElementById('test').contentWindow;

    if(URLs.length > 0){
        setTimeout(function(){
            frameWindow.location.replace(URLs.shift());
        }, 1000);
    }
}

<iframe id="test" onload="loadNext();"></iframe>

【讨论】：

【解决方案2】：

使用<img> 标签代替<iframe>！

例子：

<img src="https://maps.googleapis.com/maps/api/staticmap?center=London&zoom=13&scale=false&size=600x300&maptype=roadmap&format=png&visual_refresh=true"></img>

输出：

Learn more

【讨论】：

上面的代码在我的网站上不起作用，为什么？图片加载失败。我需要api密钥吗？
如果有，可以，但没必要。如果还不行，看看http://staticmapmaker.com/google/
我也是匈牙利人:)
不错 )) 是的，我住在匈牙利，但我是印度人 :) 非常感谢您的帮助 J

【解决方案3】：

我认为加载 100 个图像和 35 个 iframe 的唯一解决方案是使用延迟加载。

延迟加载也支持 iframe 和图像。您可以尝试免费的延迟加载插件之一： https://wordpress.org/plugins/bj-lazy-load/

希望对你有帮助。

【讨论】：

我试过了，还是很慢。我找到了解决方法。我在 iframe 中使用了defer，我对速度很满意。
<iframe defer src=""..