J'ai un script jquery que je n'ai besoin d'exécuter qu'une fois que tout le reste de la page, y compris certains autres javascripts (sur lesquels je n'ai aucun contrôle) ont fini de faire leur travail.
J'ai pensé qu'il y avait peut-être une alternative à $ (document) .ready mais je n'ai pas pu la trouver.
Réponses:
Vous pouvez avoir $(document).ready()plusieurs fois dans une page. Le code est exécuté dans l'ordre dans lequel il apparaît.
Vous pouvez utiliser l' $(window).load()événement pour votre code car cela se produit une fois que la page est complètement chargée et que tout le code des différents $(document).ready()gestionnaires a fini de s'exécuter.
$(window).load(function(){
//your code here
});$(window).on('load', function() { });puisque $ (window) .load () est obsolète.
Ce bloc de code résout mon problème,
<script type="text/javascript">
$(window).bind("load", function () {
// Code here
});
</script>Multiple $(document).ready()se déclenchera dans l'ordre de haut en bas sur la page. Le dernier $(document).ready()tirera en dernier sur la page. À l'intérieur du dernier $(document).ready(), vous pouvez déclencher un nouvel événement personnalisé à déclencher après tous les autres.
Enveloppez votre code dans un gestionnaire d'événements pour le nouvel événement personnalisé.
<html>
<head>
<script>
$(document).on("my-event-afterLastDocumentReady", function () {
// Fires LAST
});
$(document).ready(function() {
// Fires FIRST
});
$(document).ready(function() {
// Fires SECOND
});
$(document).ready(function() {
// Fires THIRD
});
</script>
<body>
... other code, scripts, etc....
</body>
</html>
<script>
$(document).ready(function() {
// Fires FOURTH
// This event will fire after all the other $(document).ready() functions have completed.
// Usefull when your script is at the top of the page, but you need it run last
$(document).trigger("my-event-afterLastDocumentReady");
});
</script>D' ici :
// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);
// Check if jQuery's loaded
function GM_wait()
{
if(typeof unsafeWindow.jQuery == 'undefined')
{
window.setTimeout(GM_wait,100);
}
else
{
$ = unsafeWindow.jQuery;
letsJQuery();
}
}
GM_wait();
// All your GM code must be inside this function
function letsJQuery()
{
// Do your jQuery stuff in here
} Cela attendra que jQuery soit chargé pour l'utiliser, mais vous pouvez utiliser le même concept, en définissant des variables dans vos autres scripts (ou en les vérifiant si elles ne sont pas votre script) pour attendre qu'elles soient chargées pour les utiliser.
Par exemple, sur mon site, j'utilise ceci pour le chargement asynchrone de JS et j'attends qu'ils aient fini avant de faire quoi que ce soit avec eux en utilisant jQuery:
<script type="text/javascript" language="JavaScript">
function js(url){
s = document.createElement("script");
s.type = "text/javascript";
s.src = url;
document.getElementsByTagName("head")[0].appendChild(s);
}
js("/js/jquery-ui.js");
js("/js/jrails.js");
js("/js/jquery.jgrowl-min.js");
js("/js/jquery.scrollTo-min.js");
js("/js/jquery.corner-min.js");
js("/js/jquery.cookie-min.js");
js("/js/application-min.js");
function JS_wait() {
if (typeof $.cookie == 'undefined' || // set in jquery.cookie-min.js
typeof getLastViewedAnchor == 'undefined' || // set in application-min.js
typeof getLastViewedArchive == 'undefined' || // set in application-min.js
typeof getAntiSpamValue == 'undefined') // set in application-min.js
{
window.setTimeout(JS_wait, 100);
}
else
{
JS_ready();
}
}
function JS_ready() {
// snipped
};
$(document).ready(JS_wait);
</script> Il s'avère qu'en raison d'un mélange particulier de frameworks javascript dont j'avais besoin pour lancer le script à l'aide d'un écouteur d'événements fourni par l'un des autres frameworks.
Avez-vous essayé de charger toutes les fonctions d'initialisation à l'aide de $().ready, en exécutant la fonction jQuery que vous vouliez en dernier?
Vous pouvez peut-être utiliser setTimeout()la $().readyfonction que vous vouliez exécuter, en appelant la fonctionnalité que vous vouliez charger.
Ou, utilisez setInterval()et faites vérifier l'intervalle pour voir si toutes les autres fonctions de chargement sont terminées (stockez le statut dans une variable booléenne). Lorsque les conditions sont remplies, vous pouvez annuler l'intervalle et exécuter la fonction de chargement.
$(window).load(function(){...})