Google maps iframe loading very slow

Question

I have written an article in wordpress and have used google iframe to load country maps of 35 countries. In other words, i am loading 35 iframes of google maps along with 100 other 640px medium size images. The size of the article i wrote is about 31 mb.

It takes about 15 seconds for the article to load, even worse in mobile browsers. Sometimes google maps causes the article content to stop loading for a long time.

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

How do i speed up the loading? Is there any simple way to do this?

I have used wordpress plugins like lazy load, but it only makes loading even worse and gets stuck. I a supe using supercache for wordpress.

Answer 1

Your code should work. I've tested this and also added a timeout before each frame load so you can see the change.

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>