Comment reporter le Javascript en ligne?

J'ai le code html suivant:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/blazy/1.8.2/blazy.min.js" defer></script>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js" integrity="sha256-8WqyJLuWKRBVhxXIL1jBDD7SDxU936oZkCnxQbWwJVw=" crossorigin="anonymous" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.min.js" defer></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous" defer></script>
    <!-- 26 dec flexslider js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.js" defer></script>
    <script defer>
    (function($) {
        $(document).ready(function() {
            //do something with b-lazy plugin, lightbox plugin and then with flexslider
        });
    })(jQuery);
    </script>
</head>
<body>
</body>
</html>

J'obtiens une erreur, en disant: jQuery n'est pas défini. Maintenant, même si je supprimer reporter à partir de mon code JS inline, il dit que jQuery n'est pas défini. Pour une raison que j'ai garder les plugins jQuery dans la tête et garder mon code JS inline. Ma question est:

Pourquoi ne pas le Javascript en ligne du code reportés lorsque defer attribut est présent sur elle?
Est-il un moyen d'imiter le reporter le problème sur mon inline code Javascript? Je peux mettre qu'à la fin de la balise body, si nécessaire.

déplacez votre inline code javascript dans un fichier externe et reporte alors 🙂
Aussi, vous pouvez par programmation inline votre javascript externe si vous ne voulez pas l'utiliser html5
Je ne peux pas le mettre dans un fichier externe pour une raison quelconque. Il est généré par php et je ne sais pas à propos de php donc je ne peux pas changer ce code.
Vous avez de ne pas reporter votre bibliothèque jQuery.. il n'a pas à être dans l'en-tête du document tho -- vous pouvez le déplacer à la fin du corps, tant que ça vient avant le script inline et n'est pas reporté il va bien.
Eh bien obtenir quelques qui sait à propos de php (si possible celui qui a écrit le code que vous utilisez). Ou il suffit de déposer la defer partout.

OriginalL'auteur user31782 | 2016-12-30

61

Le scripts avec le defer attribut de la charge dans l'ordre où elles sont indiquées, mais pas avant le document lui-même a été chargé. Comme defer n'a aucun effet sur script balises sauf s'ils disposent également de la src attribut, le premier script qui est exécuté est votre script en ligne. Donc, à l'époque jQuery n'est pas chargé.

Vous pouvez résoudre ce problème de deux façons au moins:
- Mettre votre script en ligne dans un .js fichier de référence et avec un src attribut (en plus de la defer attribut qui vous avaient déjà là), ou
- Laissez votre script en ligne d'attente pour le document et le report de scripts à charger. Le DOMContentLoaded événement se déclenche lors de ce qui s'est passé:
```
<script>
    window.addEventListener('DOMContentLoaded', function() {
        (function($) {
            //do something with b-lazy plugin, lightbox plugin and then with flexslider
        })(jQuery);
    });
</script>
```
NB: Notez que dans ce dernier cas $(document).ready(function() n'est pas inclus, car ce serait d'attendre pour le même événement (DOMContentLoaded). Vous pourrait toujours inclure comme vous l'avez fait dans votre code original, mais alors jQuery serait tout simplement d'exécuter la fonction de rappel immédiatement, qui ne fait aucune différence pratique.

Merci pour la réponse. Est-il sûr que DOMContentLoaded événement se déclenche après tout le différé des scripts ont été chargés?
Oui, c'est sûr.
Oh oui! c'est ce que le MDN documentation dit...
Bien que ce soit une bonne solution, il est tout de même rendre le blocage, ce qui, probablement, défaites le but de reporter jQuery en premier lieu. Pour un véritable non-blocage de l'exécution, vous feriez mieux d'imiter le "différer" l'attribut javascript en ligne blocs à l'aide de cette astuce.
Il y a des cas où le code ne fonctionne plus si vous faites cela. Par exemple, si le code a document.write, puis il va se comporter d'une manière complètement différente.

OriginalL'auteur trincot
3

De MDN docs:

reporter

Cette valeur de l'attribut est utilisé pour indiquer au navigateur que le script est destiné à être exécuté après que le document a été analysée, mais avant de tirer DOMContentLoaded. Le reporter de l'attribut doit être utilisé uniquement sur des scripts externes.

Il s'agit d'une IIFE (Immédiatement appelé la Fonction de l'Expression) qui sera exécuté avant le DOM est disponible. Alors, dans ce cas jQuery est pas défini, car il n'est pas dans les DOM.

Mais que faire avec les scripts inline? Et pourquoi ne pas suivre l'ordre dans lequel elle est déclarée?
il faut dire que le (jQuery) partie exige que jQuery est défini avant son consulté -- et de reporter un script moyens de ne pas définir quelque chose dans le script jusqu'à ce que après tout le reste (y compris le code inline)
C'est à cause de IIFE de la syntaxe que vous avez. Qui s'exécute immédiatement et ne pas attendre pour les dom de se charger.
Avec votre dernière modification il serait encore jeter l'erreur jQuery is not defined.
J'ai reçu votre point. Oui, il va jeter erreur.

OriginalL'auteur Jai

Vous devez vous connecter pour publier un commentaire.