J'ai un jquery script qui ne doit être exécuté qu'une fois que tout le reste de la page, y compris certains autres javascripts (sur lesquels je n'ai aucun contrôle) ont terminé leur travail.
Je pensais qu'il existait peut-être une alternative à $(document).ready mais je ne l'ai pas trouvée.
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 le $(window).load() pour votre code, car cela se produit après que la page a été entièrement chargée et que tout le code dans les différents éléments de la page a été chargé. $(document).ready() ont fini de fonctionner.
$(window).load(function(){
//your code here
});
Cette réponse m'a été utile car je n'avais pas réalisé que le code jquery était exécuté en séquence.
Multiple $(document).ready() se déclencheront dans l'ordre du haut vers le bas de la page. La dernière $(document).ready() se déclenchera en dernier sur la page. À l'intérieur du dernier $(document).ready() vous pouvez déclencher un nouvel événement personnalisé qui se déclenchera après tous les autres
Enveloppez votre code dans un gestionnaire d'événement 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>
De aquí :
// 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 s'ils ne sont pas votre scripts) pour attendre qu'ils soient chargés pour les utiliser.
Par exemple, sur mon site, je l'utilise pour le chargement asynchrone des JS et pour attendre qu'ils soient terminés 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>
Cela ne fera qu'attendre que jQuery soit chargé et ne tiendra pas compte des autres aspects de la page. Ce n'est rien de plus qu'un hack pour les anciennes versions de greasemonkey qui ne supportent pas la directive @require.
Avez-vous essayé de charger toutes les fonctions d'initialisation à l'aide de la fonction $().ready en exécutant la fonction jQuery que vous vouliez en dernier ?
Vous pouvez peut-être utiliser setTimeout() sur le $().ready que vous vouliez exécuter, en appelant la fonctionnalité que vous vouliez charger.
Ou bien, utilisez setInterval() et faire en sorte que l'intervalle vérifie si toutes les autres fonctions de chargement sont terminées (stocker l'état dans une variable booléenne). Lorsque les conditions sont remplies, vous pouvez annuler l'intervalle et exécuter la fonction de chargement.
Je ne suis pas sûr de ce que vous voulez dire par là. Suggérez-vous que j'importe tous les scripts à travers un scripts de jquery et que je place mon scripts en dernier ? Si oui, à quoi cela ressemblerait-il (je suis un designer de métier, alors n'utilisez pas de grands mots :)).
$(document).ready(function(){ callLoadFunction1() ; callLoadFunction2() ; calljQueryLoadFunction() ; }) ;
Les autres scripts sont tous des fichiers externes donc je ne suis pas sûr que cela fonctionnerait, n'est-ce pas ?
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
