Possibilité de reporter le chargement de jQuery?
https://stackoverflow.com/questions/5852767
-
27-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Avouons-il, jQuery / jQuery-ui est un téléchargement lourd.
Google recommande chargement différé de JavaScript à la vitesse le rendu initial. Ma page utilise jQuery pour mettre en place des onglets qui sont placés bas sur la page (la plupart du temps hors de la vue initiale) et je voudrais defer jQuery qu'APRÈS la page a rendu.
Code de report de Google ajoute une étiquette au DOM après le chargement de la page en accrochant dans le corps événement onLoad:
<script type="text/javascript">
// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
Je voudrais Différer le chargement de jQuery cette façon, mais quand je l'ai essayé mon code jQuery n'a pas trouvé jQuery (pas tout à fait inattendu de ma part):
$(document).ready(function() {
$("#tabs").tabs();
});
Alors, il semble que je dois trouver un moyen d'exécution defer de mon code jQuery jusqu'à ce que jQuery est chargé. Comment puis-je détecter que l'étiquette a ajouté le chargement et l'analyse terminée?
En corollaire, il semble que chargement asynchrone peut également contenir une réponse.
Toutes les pensées?
La solution
Essayez ce qui est quelque chose que j'édité il y a quelques temps du bookmarklet jQuerify. Je l'utilise souvent pour charger jQuery et exécuter des choses après qu'il est chargé. Vous pouvez remplacer bien sûr l'URL là-bas avec votre propre URL pour votre jquery personnalisé.
(function() {
function getScript(url,success){
var script=document.createElement('script');
script.src=url;
var head=document.getElementsByTagName('head')[0],
done=false;
script.onload=script.onreadystatechange = function(){
if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
done=true;
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
head.appendChild(script);
}
getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js',function(){
// YOUR CODE GOES HERE AND IS EXECUTED AFTER JQUERY LOADS
});
})();
Je voudrais vraiment combiner jQuery et jQuery-UI dans un fichier et d'utiliser une URL pour elle. Si vous voulez vraiment les charger séparément, juste enchaîner les getScripts:
getScript('http://myurltojquery.js',function(){
getScript('http://myurltojqueryUI.js',function(){
//your tab code here
})
});
Autres conseils
Comme il est question en tête de classement sur un sujet important laissez-moi être si hardi de fournir mon point de vue sur cette base sur une réponse précédente de @valmarv et @amparsand.
J'utilise un tableau multidimensionnel pour charger les scripts. Le regroupement des ceux qui ont pas de dépendance entre eux:
var dfLoadStatus = 0;
var dfLoadFiles = [
["http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"],
["http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js",
"/js/somespecial.js",
"/js/feedback-widget.js#2312195",
"/js/nohover.js"]
];
function downloadJSAtOnload() {
if (!dfLoadFiles.length) return;
var dfGroup = dfLoadFiles.shift();
dfLoadStatus = 0;
for(var i = 0; i<dfGroup.length; i++) {
dfLoadStatus++;
var element = document.createElement('script');
element.src = dfGroup[i];
element.onload = element.onreadystatechange = function() {
if ( ! this.readyState ||
this.readyState == 'complete') {
dfLoadStatus--;
if (dfLoadStatus==0) downloadJSAtOnload();
}
};
document.body.appendChild(element);
}
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
Il charge d'abord jquery après son chargement de continuer à charger les autres scripts à la fois. Vous pouvez ajouter des scripts facile en ajoutant au tableau n'importe où sur votre page:
dfLoadFiles.push(["/js/loadbeforeA.js"]);
dfLoadFiles.push(["/js/javascriptA.js", "/js/javascriptB.js"]);
dfLoadFiles.push(["/js/loadafterB.js"]);
Voici une bonne description de approche moderne pour async / javascript chargement defer . Mais il ne fonctionne pas pour les scripts en ligne
<script type="text/javascript" src="/jquery/3.1.1-1/jquery.min.js" defer></script>
<script type="text/javascript" defer>
$(function () { // <- jquery is not yet initialized
...
});
</script>
La solution la plus simple pour le chargement async a été suggéré par @nilskp - script Externaliser:
<script type="text/javascript" src="/jquery/3.1.1-1/jquery.min.js" defer></script>
<script type="text/javascript" src="resources/js/onload.js" defer></script>
Mettre jQuery et votre code dépendant jQuery à la fin de votre fichier HTML.
Edit: Un peu plus clair
<html>
<head></head>
<body>
<!-- Your normal content here -->
<script type="text/javascript" src="http://path/to/jquery/jquery.min.js"></script>
<script>//Put your jQuery code here</script>
</body>
</html>
element.addEventListener("load", function () {
$('#tabs').tabs()
}, false);
essayer.
Dans certains cas, vous pouvez déclencher un événement lorsque jquery est chargé.
<script type="text/javascript">
(function (window) {
window.jQueryHasLoaded = false;
document.body.addEventListener('jqueryloaded', function (e) {
console.log('jqueryloaded ' + new Date() );
}, false);
function appendScript(script) {
var tagS = document.createElement("script"),
s = document.getElementsByTagName("script")[0];
tagS.src = script.src;
s.parentNode.insertBefore(tagS, s);
if ( script.id == 'jquery' ) {
tagS.addEventListener('load', function (e) {
window.jQueryHasLoaded = true;
var jQueryLoaded = new Event('jqueryloaded');
document.body.dispatchEvent(jQueryLoaded);
}, false);
}
}
var scripts = [
{
'id': 'jquery',
'src': 'js/libs/jquery/jquery-2.0.3.min.js'
},
{
'src': 'js/myscript1.js'
},
{
'src': 'js/myscript2.js'
}
];
for (var i=0; i < scripts.length; i++) {
appendScript(scripts[i]);
}
}(window));
</script>
Enveloppez ensuite vos dépendances dans une fonction:
// myscript1.js
(function(){
function initMyjQueryDependency() {
console.log('my code is executed after jquery is loaded!');
// here my code that depends on jquery
}
if ( jQueryHasLoaded === true )
initMyjQueryDependency();
else
document.body.addEventListener('jqueryloaded', initMyjQueryDependency, false);
}());
Si les finitions jquery à charge après les autres scripts, vos dépendances sera exécuté lorsque l'événement jqueryloaded est déclenché.
Si jquery est déjà chargé, jQueryHasLoaded === true, votre dépendance sera exécutée initMyjQueryDependency().
J'ajouter ce morceau de code après la async / defered jquery balise script, ce qui définit une fonction temporaire $ qui accumule tout ce que doit fonctionner quand tout est le chargement fait, et puis une fois que nous sommes l'utilisation done $ que à ce moment, elle est remplacée pour exécuter les fonctions. Avec ce morceau de code il n'y a pas besoin de changer la syntaxe jQuery onload plus bas dans le document.
<script defer async src="https://code.jquery.com/jquery-2.2.0.min.js">
<script>
var executeLater = [];
function $(func) {
executeLater.push(func);
}
window.addEventListener('load', function () {
$(function () {
for (var c = 0; c < executeLater.length; c++) {
executeLater[c]();
}
});
})
</script>
.... puis ...
<script>
$(function() {
alert("loaded");
});
</script>
Eh bien, il me semble, tout ce que vous avez à faire est soit a) ajouter le code jQuery que vous souhaitez exécuter la charge, à la fin du fichier jQuery ou b) ajouter à la fonction downloadJSAtOnload comme ceci:
<script type="text/javascript">
// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
$("#tabs").tabs(); // <==== NOTE THIS. This should theoretically run after the
// script has been appended, though you'll have to test this
// because I don't know if the JavaScript above will wait for
// the script to load before continuing
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
Le code suivant doit charger vos scripts après la fenêtre est terminé le chargement:
<html>
<head>
<script>
var jQueryLoaded = false;
function test() {
var myScript = document.createElement('script');
myScript.type = 'text/javascript';
myScript.async = true;
myScript.src = jQueryLoaded ? 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js' : 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js';
document.body.appendChild(myScript);
if(!jQueryLoaded){
alert('jquery was loaded');
jQueryLoaded = true;
test();
} else {
alert('jqueryui was loaded');
}
}
if (window.addEventListener){
alert('window.addEventListener');
window.addEventListener("load", test, false);
} else if (window.attachEvent){
alert('window.attachEvent');
window.attachEvent("onload", test);
} else{
alert('window.onload');
window.onload = test;
}
</script>
</head>
<body>
<p>Placeholder text goes here</p>
</body>
</html>
A travaillé pour moi dans Chrome, FF et IE9 - laissez-moi savoir si cela aide
Voici ma version qui supports CHAÎNAGE pour être sûr que les scripts sont chargés l'un après l'autre, en fonction de esperluette code de ':
var deferredJSFiles = ['jquery/jquery', 'file1', 'file2', 'file3'];
function downloadJSAtOnload() {
if (!deferredJSFiles.length)
return;
var deferredJSFile = deferredJSFiles.shift();
var element = document.createElement('script');
element.src = deferredJSFile.indexOf('http') == 0 ? deferredJSFile : '/js/' + deferredJSFile + '.js';
element.onload = element.onreadystatechange = function() {
if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')
downloadJSAtOnload();
};
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener('load', downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent('onload', downloadJSAtOnload);
else
window.onload = downloadJSAtOnload;
<!doctype html>
<html>
<head>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide" >Hide</button>
<button id="show" >Show</button>
<script type="text/javascript">
function loadScript(url, callback) {
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState) { //IE
script.onreadystatechange = function() {
if (script.readyState == "loaded" ||
script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function() {
callback();
};
}
script.src = url;
document.body.appendChild(script);
}
loadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js",
function() {
//YAHOO.namespace("mystuff");
$("#show").click(function() {
$("p").show();
});
$("#hide").click(function() {
$("p").hide();
});
//more...
});
</script>
</body>
</html>
Je pense que Modernizr.load () mérite une mention ici - il gère le chargement des dépendances très bien
apparaît que vous avez juste besoin <script defer>: http://www.w3schools.com/tags/att_script_defer .asp
Prenez un jQuery.holdReady() look
« Contient ou libère l'exécution de l'événement prêt jQuery. » (JQuery 1,6 +)
Charger tous les scripts à la fin du html avec http://labjs.com , il est une solution 100% et je testé plusieurs fois par rapport aux règles de gtmetrix. exemple http://gtmetrix.com/reports/interactio.cz/jxomHSLV
