Iframe von Google Maps wird sehr langsam geladen

Ich habe einen Artikel in WordPress geschrieben und Google Iframe verwendet, um Länderkarten von 35 Ländern zu laden. Mit anderen Worten, ich lade 35 Iframes von Google Maps zusammen mit 100 anderen mittelgroßen 640-Pixel-Bildern. Die Größe des Artikels, den ich geschrieben habe, beträgt etwa 31 MB.

Es dauert ungefähr 15 Sekunden, bis der Artikel geladen ist, noch schlimmer in mobilen Browsern. Manchmal führt Google Maps dazu, dass der Artikelinhalt für längere Zeit nicht mehr geladen wird.

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

Wie beschleunige ich das Laden? Gibt es eine einfache Möglichkeit, dies zu tun?

Ich habe WordPress-Plugins wie Lazy Load verwendet, aber es macht das Laden nur noch schlimmer und bleibt hängen. Ich benutze Supercache für WordPress.

Dein Code sollte funktionieren. Ich habe dies getestet und vor jedem Frame-Laden ein Timeout hinzugefügt, damit Sie die Änderung sehen können.

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>

Verwenden Sie die <img> tag statt <iframe>!

Beispiel:

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

Ausgänge:

Mehr erfahren

Ich denke, die einzige Lösung zum Laden von 100 Bildern und 35 iFrames ist die Verwendung von Lazy Load.

Lazy Load unterstützt auch Iframes und Bilder. Sie können eines der kostenlosen Lazy-Load-Plugins ausprobieren:
https://wordpress.org/plugins/bj-lazy-load/

Ich hoffe es hilft.