Asynchrones Javascript auch mit Adsense

Alex07

Bin wieder im Optimierungs-Wahn. Javascript wird jetzt auch mit Adsense asynchron geladen.

Hier mal ein Beispiel:

Zitat

<script async src="https://beispiel.rocks/beispiel.rocks…/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-******"
data-ad-slot="******"></ins>
<script>
(adsbygoogle = window.adsbygoogle []).push({});
</script>

Alles anzeigen

Ad Slot und Ad Client mit euren Daten füttern. Natürlich auch width und height anpassen, für die jeweilige Adsense Anzeige.
Funktioniert super

catcat

Bei mir wird da ein komischen Dingens generiert im Blog:

Code

<script type="text/javascript" src="[URL="https://seo-nw.de/view-source:https://beispiel.rocks/beispiel.rocks/pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"]//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js[/URL]" async=""></script><!-- SL-startseite-1 --> <ins class="adsbygoogle sl-startseite-1" style="display: inline-block; margin-top: -100px;" data-ad-client="ca-pub-xxx" data-ad-slot="xxx"></ins><script type="text/javascript">//  (adsbygoogle = window.adsbygoogle || []).push({}); // ]]&gt;</script>

Wieso ist da ein
async="" und wieso ist das leer?

Synonym

Zitat von catcat

Wieso ist da ein
async="" und wieso ist das leer?

Das ist leer, weil async genauso wie defer keine weitere Angaben benötigt und nach HTML5-Standard eben nur so definiert wird. Genau genommen ist das ="" hier sogar gar nicht vorhanden oder muss es nicht. Im Original-Code von Google steht z.B. nur "async". Das ="" macht der Browser selbst bei der Quelltextanzeige, weil es nach HTML4-Standard so sein muss. Dort muss entweder async="" oder async="async" stehen, also ein Wert für die "Variable" vergeben werden.

Warum es überhaupt da ist? Das async sorgt dafür, dass moderne Browser das Script asynchron laden. So gesehen ist es kein echtes asynchron-Laden, sondern ein, naja, Feature des Browsers. Hier entscheidet also der Browser, ob er async überhaupt versteht und ob er es ausführen will (Der IE kann es etwa erst ab v10. Vorherige Versionen ignorieren das async="" einfach). Echtes asynchron geht direkt über die Ladereihenfolge im Quelltext bzw. dem Nachladen der Scripte über ein Hilfsscript, z.B.

Code

function OnloadScriptLoader(url, async, callback)
{
    var script = document.createElement("script")
    script.type = "text/javascript";
    if(async) script.async = "async";
    if(async) script.defer = "defer";


    if (callback) {
        if (script.readyState) { // IE
            script.onreadystatechange = function() {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        }
        else { // Gecko
            script.onload = function(){
                callback();
            };
        }
    }


    script.src = url;
    document.body.appendChild(script);
}

Alles anzeigen

Der Unterschied ist, dass mit Hilfsscript ein echtes Async da ist und es eben wirklich "nachgeladen" wird. Hier kann sogar festgelegt werden, in welcher Reihenfolge die Scripte nach dem Seitenaufbau hinzugefügt werden. z.B. Bei mir die Gmap (Seite laden - > Clusterer laden -> Marker laden -> Map-Script laden -> Map starten). Bei Async hat man keinen wirklichen Einfluss darauf, wie der Browser das macht. Das kann aus der Reihenfolge aus dem Quelltext sein, muss aber nicht. Async beginnt den Ladevorgang schon während dem Seitenaufbau, echtes Nachladen aber eben danach.

catcat

Ah Danke!

Was async macht wußte ich schon, aber nicht, das man das auch mit einem (leeren) Attribut versehen kann.
Cooles script. Kann ich grade gebrauchen