Maison > Article > interface Web > Commentez 4 façons de charger de manière asynchrone les compétences js_javascript

Commentez 4 façons de charger de manière asynchrone les compétences js_javascript

WBOYoriginal: 2016-05-16 15:24:101256parcourir

4 façons de charger js de manière asynchrone, la revue commence.

Option 1 : $(document).prêt

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

Commentaires :

1. Besoin de citer jquery

2. Compatible avec tous les navigateurs.

Option 2 : 3f1c4e4b6b16bbbd69b2ee476dc4f83a attribut async="async" de la balise

La définition et l'utilisation de l'async (c'est un attribut du HTML5)

L'attribut async précise qu'une fois le script disponible, il sera exécuté de manière asynchrone.

Exemple :

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

Commentaires :

1. Les nouveaux attributs en HTML5 sont pris en charge par Chrome, FF, IE9 et IE9 (IE6~8 ne sont pas pris en charge). De plus, cette approche ne garantit pas que les scripts seront exécutés dans l'ordre.

2. L'attribut async s'applique uniquement aux scripts externes (uniquement lors de l'utilisation de l'attribut src).

Option 3 : 3f1c4e4b6b16bbbd69b2ee476dc4f83a attribut de la balise

L'attribut

defer spécifie s'il faut différer l'exécution du script jusqu'au chargement de la page.

Certains scripts javascript utilisent la méthode document.write pour créer le contenu actuel du document, mais d'autres scripts ne le peuvent pas.

Si votre script ne modifie pas le contenu du document, vous pouvez ajouter l'attribut defer à la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a pour accélérer le traitement du document. Étant donné que le navigateur sait qu'il sera capable de lire en toute sécurité le reste du document sans exécuter le script, il différera l'interprétation du script jusqu'à ce que le document ait été affiché à l'utilisateur.

Exemple :

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

Commentaires : Compatible avec tous les navigateurs. De plus, cette approche garantit que tous les scripts qui définissent l'attribut defer sont exécutés dans l'ordre.

Option 4 : Création dynamique de balises 3f1c4e4b6b16bbbd69b2ee476dc4f83a

Exemple :

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

Commentaires : Compatible avec tous les navigateurs.

Ce qui précède est une introduction différenciée aux quatre méthodes de chargement asynchrone js. J'espère que cela sera utile à tout le monde dans l'apprentissage du chargement asynchrone js.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Un piège des questions sur les objets Comprendre les objets Javascript_Compétences JavascriptArticle suivant：Un piège des questions sur les objets Comprendre les objets Javascript_Compétences Javascript

Articles Liés

Voir plus