谷歌地图的iframe加载非常缓慢

Question

我在WordPress上写了一篇文章，并使用谷歌的iframe加载了35个国家地图。换句话说，我加载了35个谷歌地图的iframe以及100张640像素的中等大小图片。我写的文章大小约为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>

如何加速加载速度？有没有简单的方法来做到这一点？

我曾经使用过像lazy load这样的wordpress插件，但它只会使加载更慢并变得卡顿。我现在在使用wordpress的supercache。

- pbu

---

你能否使用静态图片代替Google Maps API？ - mrogers

如何生成静态地图？ - pbu

我的意思是截取地图的屏幕截图，使用图片代替实际地图。如果这些地图不打算被操作的话。 - mrogers

还有其他解决iframe的方法吗？ - pbu

Answer 1

请使用 <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>

输出:

了解更多

（备注：此内容为HTML代码，无需翻译）

- Norbetto89

---

以上代码在我的网站上无法运行，为什么？图片无法加载。我需要 API 密钥吗？ - pbu

如果你有，你可以使用，但这并不是必要的。如果它不能正常工作，请查看http://staticmapmaker.com/google/。 - Norbetto89

我也是匈牙利人 :) - Norbetto89

很好)) 是的，我住在匈牙利，但我是印度人:) 非常感谢您的帮助J - pbu

Answer 2

你的代码应该是可以工作的。我已经测试过了，并且在每个帧加载之前添加了一个超时，这样你就可以看到变化。

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>

- Mr. HK

Answer 3

我认为加载100张图片和35个iframe的唯一解决方案是使用懒加载。

懒加载还支持iframe和图片。您可以尝试其中一个免费的懒加载插件： https://wordpress.org/plugins/bj-lazy-load/

希望这能够帮到您。

- Than Ngo Hoai

---

我尝试过了，但速度仍然很慢。我找到了一个解决方法。我在iframe中使用了defer，现在速度非常快，我很满意。 - pbu

<iframe defer src="".. - pbu