谷歌地图iframe加载速度很慢

Question

我在wordpress上写了一篇文章，并使用谷歌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插件，但它只会使加载更糟糕而且卡住了。我是一个使用supercache进行wordpress的supe。

Answer 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>

Answer 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

Answer 3

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

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

我希望它有所帮助。