谷歌地圖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/

我希望它有幫助。