谷歌地图iframe加载速度很慢

Question

我在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的。

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>标记而不是！

实施例：

<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和图像。你可以尝试一个免费的懒加载插件： https://wordpress.org/plugins/bj-lazy-load/

我希望它有帮助。