jQuery .load(function) synchrone

Question

Quelle est la meilleure façon d'utiliser la fonction de chargement de jQuery de manière synchrone.

Je dois charger une image mais je ne peux pas exécuter la ligne de code suivante tant que l'image n'est pas chargée.

Je pourrais boucler une variable jusqu'à ce que le chargement soit terminé, mais je me demandais s'il y avait une meilleure façon de procéder.

var img = jQuery('<img src="' + url + '"/>').load(function () {                 

            });  
  //Run code here once img load has comlpeted.

Answer 1

Vous pouvez également utiliser la fonction CallBack pour obtenir un comportement synchrone -

var result = $('#main-container').load( 'html/Welcomeform.html', 
                function () {
                     if($("textarea").find("#mail-id")){
                        $("textarea#mail-id").val(email_id);
                     }
                     } );

Answer 2

D'après ce que je sais, la load se déclenchera toujours de manière asynchrone sauf si l'image est déjà mise en cache (dans certains navigateurs). La seule solution fiable est de placer le code dans un callback comme vous l'avez fait. Cependant, pour s'assurer que le load sera toujours déclenché dans tous les navigateurs, même si l'image est mise en cache, assurez-vous d'ajouter le gestionnaire avant la mise en place de la src de l'image.

Answer 3

var img = jQuery('<img src="' + url + '"/>').load(runner);  
function runner() {
    //run code here once image is loaded
}

Answer 4

Je suis arrivé ici à la recherche d'une solution similaire. D'après les lectures, ce n'est pas possible avec .load, il faut utiliser une requête AJAX, comme le souligne le commentaire de la question.

Dans mon cas, je dois charger un fichier html et j'ai ajouté une transition pour changer le contenu. L'ancien contenu était affiché avant le nouveau après la transition même si j'affichais le contenu à l'intérieur du callback de chargement.

var main = $("#main");
    main.load("about.html", displaySection);

function displaySection () {
   main.show('blind');
}

Ma solution a été d'exécuter la transition qui affiche le contenu chargé à l'intérieur d'une fonction de temporisation avec un paramètre de 200 pour le délai.

var main = $("#main");
    main.load("about.html", displaySection);

function displaySection () {
    setTimeout(function() {
        main.show('blind');
    }, 200);
}

Le problème peut se poser si la connexion est si lente que la nouvelle page prend plus de 200 ms à charger, mais dans ce cas je me demande si le callback sera lancé plus tard. Je ne comprends pas pourquoi cela ne fonctionne pas sans le timeout qui me semble assez moche, mais cela a résolu mon problème... juste au cas où d'autres n'auraient pas réfléchi à cette possibilité.

Answer 5

La fonction de rappel dans load() se déclenche une fois que les éléments de base de l'écran ont été récupérés (le code HTML), mais n'attend pas que les images soient terminées, vous pouvez utiliser cette fonction pour la faire attendre.

$('#holder').load(function() { 
var imgcount = $('#holder img').length; 
$('#holder img').load(function(){ 
imgcount--; 
if (imgcount == 0) { 
/* now they're all loaded, let's display them! */ 
} 
}); 
});