谷歌地图 iframe 加载速度很慢

Question

我在 wordpress 中写了一篇文章，并使用 google iframe 加载 35 个国家的国家地图。换句话说，我正在加载 35 个 google 地图 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>