11548 sujets

JavaScript, DOM et API Web HTML5

[resolu] Jquery load et images

Bonjour tout le monde,

J'ai préparé un code source pour faire afficher le contenu d'une page html donnée dans une div, et ça marche sans soucis. Le problème est que l'effet d'animation (pendant le chargement) fonctionne mais se termine alors que la page n'est pas encore totalement chargée (je pense aux images).

J'ai beau utiliser les fonctions .ajaxStart et ajaxStop pour lancer mon animation, mais ça marche pas comme je veux. En fait, jquery considère que la fonction ajax est terminée dès lors que le code source a été intégré (ce qui n'est pas faux en soit)...mais j'aimerai qu'il attende que les images soient aussi chargées. Une idée de comment faire ?

J'ai pensé à obliger la navigateur à pré-charger ces images, mais je trouve ça un peu bourrin comme méthode.

J'aimerai avoir vos avis...
Modifié par volonia75 (16 Feb 2010 - 15:32)
Oui, c'est cette fonction là.

Voilà pour info le code source

$(document).ready(function() {
	$('#footer a').click(function() {
		$('#menu').slideDown('fast');
	});
	
	$('#menu a').click(function() {
		$('#contenu').load(this.href);
                $('#menu').slideUp('fast');
		return false;
	});
});


Il y a un lien dans ma div #footer qui fait descendre un menu (div #menu). Dans ce menu, il y a des liens vers d'autres pages...pages qui sont chargées directement dans la div #contenu grâce à la fonction load en question. (j'espère avoir été clair Smiley cligne )

Après avoir cliqué sur le lien, le contenu est chargé dans la div #contenu et le menu remonte (div #menu).

Le truc que je veux, c'est que le menu remonte une fois que le contenu est chargé avec les images. Pour le moment, le menu remonte une fois le code source chargé...mais il faut attendre pour que les images s'affichent.
Modérateur
Salut volonia75, Smiley smile

Comme te l'a fait remarqué jo_link_noir, tu ne charges pas ta fonction au bon moment.

Soit tu attends uniquement l'interprétation du code source (événement DOMContentLoaded), auquel cas, les images ne seront pas encore chargées, soit tu attends l'événement load et là, les images seront chargées (mais ton script ne sera pas actif tant que les images se chargeront).

Pour le premier cas, on procède comme suit sous jQuery :
jQuery(function() { ... });
,
$(function() { ... });
ou encore
$(document).ready(function() { ... });
ce qui correspond à ton code actuel.

Pour le second cas, celui qui t'intéresse, ce serait plus ainsi :
$(window).load(function() { ... });
Salut Koala64,

Merci pour ces précisions. Cependant, je ne suis pas sûr d'avoir tout bien saisi. Voyons-voir...

Mon fonction est appelée à partir de $(document).ready, puis la fonction est exécutée lorsque l'on clique sur le lien de mon menu. Le problème viendrait donc de là ?!

Je regarde ta proposition de code, mais j'ai du mal à comprendre comment intégrer dans une div existante le contenu d'une page html en lien avec $(window). Cela ne va-t'il pas remplacé toute ma page html par le code issu du lien ?

En tout cas, c'est effectivement le second cas qui m'intéresse comme tu l'as décrit. Pendant que les images se chargent, je peux toujours mettre un petit gif animé de loading, ça ne me pose pas de problème.

Mais actuellement, je ne vois pas bien comment modifier mon code source à l'aide de tes indications.

Merci de ton aide (précieuse) Smiley smile
Il existe 2 fonctions load, une pour l'ajax et une pour les événements, je préciser au cas ou.

$('#contenu').load(this.href);

Permet de faire de l'ajx (passage d'une chaine de caractères).

$('#contenu img').load(function(){});

Attend la fin du chargement des image de #contenu. C'est dedans qu'il faut faire apparaitre le menu.


Bien sur, le 2ème load est à mettre dans la fonction de callback du 1er Smiley biggol
Ta "petite" précision éclaire tout! Je ne savais pas qu'il existait 2 fonctions load. Tout est clair maintenant !

Je tente ça demain matin...

Merci à vous deux Smiley smile
Sujet clos
Aller à