suchen

Heim  >  Artikel  >  Web-Frontend  >  Kommentieren Sie 4 Möglichkeiten zum asynchronen Laden von js_javascript-Kenntnissen

Kommentieren Sie 4 Möglichkeiten zum asynchronen Laden von js_javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:24:101248Durchsuche

4 Möglichkeiten zum asynchronen Laden von js, die Überprüfung beginnt.

Option 1: $(document).ready

<!DOCTYPE html>
<html>
    <head>
        <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 
        <script type="text/javascript">
            $(document).ready(function() {
              alert("加载完成！");
            });
        </script>
    </head>
    <body>
        <img src="http://images.cnitblog.com/i/121863/201405/222202573569862.jpg" />
    </body>
</html>

Kommentare:

1. Jquery muss zitiert werden

2. Kompatibel mit allen Browsern.

Option 2: 3f1c4e4b6b16bbbd69b2ee476dc4f83a async="async"-Attribut des Tags

Die Definition und Verwendung von Async (es ist ein Attribut von HTML5)

Das async-Attribut gibt an, dass das Skript asynchron ausgeführt wird, sobald es verfügbar ist.

Beispiel: 

<script type="text/javascript" src="xxxxxxx.js" async="async"></script>

Kommentare:

1. Die neuen Attribute in HTML5 werden von Chrome, FF, IE9 und IE9 unterstützt (IE6~8 werden nicht unterstützt). Darüber hinaus garantiert dieser Ansatz nicht, dass die Skripte in der richtigen Reihenfolge ausgeführt werden.

2. Das async-Attribut gilt nur für externe Skripte (nur bei Verwendung des src-Attributs).

Option 3:

Das Attribut

defer gibt an, ob die Skriptausführung verzögert werden soll, bis die Seite geladen ist.

Einige Javascript-Skripte verwenden die Methode document.write, um den aktuellen Dokumentinhalt zu erstellen, andere Skripte jedoch möglicherweise nicht.

Wenn Ihr Skript den Inhalt des Dokuments nicht ändert, können Sie das Defer-Attribut zum 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag hinzufügen, um die Verarbeitung des Dokuments zu beschleunigen. Da der Browser weiß, dass er den Rest des Dokuments sicher lesen kann, ohne das Skript auszuführen, verzögert er die Interpretation des Skripts, bis das Dokument dem Benutzer angezeigt wurde.

Beispiel: 

<script type="text/javascript" defer="defer"> 
alert(document.getElementById("p1").firstChild.nodeValue); 
</script>

Kommentare: Kompatibel mit allen Browsern. Darüber hinaus stellt dieser Ansatz sicher, dass alle Skripte, die das Defer-Attribut festlegen, der Reihe nach ausgeführt werden.

Option 4: Dynamische Erstellung von 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags

Beispiel: 

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            (function(){
                var s = document.createElement('script');
                s.type = 'text/javascript';
                s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
                var tmp = document.getElementsByTagName('script')[0];
                tmp.parentNode.insertBefore(s, tmp);
            })();
        </script>
    </head>
    <body>
        <img src="http://images.cnitblog.com/i/121863/201405/222202573569862.jpg" />
    </body>
</html>

Kommentare: Kompatibel mit allen Browsern.

Das Obige ist eine differenzierte Einführung in die vier Methoden des asynchronen Ladens von js. Ich hoffe, dass es für alle beim Erlernen des asynchronen Ladens von js hilfreich ist.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Eine Falle von Objektfragen: Verständnis von Javascript-Objekten_Javascript-FähigkeitenNächster Artikel：Eine Falle von Objektfragen: Verständnis von Javascript-Objekten_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen