Attendre le chargement d'un contenu dans une div [Résolu]

[neoxen]

Bonjour a tous,

Voila je suis actuellement sur un projet qui est de développer ma propre version d'une dialog box (en gros une div en position absolute qui contient du texte et des images)

Pour cela j'ai utiliser cette méthode

Code :

1
2
3
4
5
 
$('<div id="dialogBox"></div>').appendTo('body').html('un contenu html avec image <img src="Source.gif">');
$('#'+config.boxId).css({
    position:'absolute'
});

Le problème est que je souhaite possitionner cette boite au milieu du l'ecran.
Pour cela je regarde la largeur et la hauteur de la box "dialogBox" avec

Code :

1
2
3
 
console.log($('#'+config.boxId).width());
console.log($('#'+config.boxId).height());

Et c'est la que je me rend compte que le résultat donné correspond a la hauteur et la largeur de la box avant le chargement de l'image.

Ma question est donc, peut-on attendre le chargement complet d'une div avant de regarder sa hauteur et sa largeur ?

[SpaceFrog]

en tablant sur le fait que le plus long à charger sera l'image, tu peux essayer de passer par le onload de l'image ?

[neoxen]

le problème c'est que c'est un contenu dynamique qui est chargé, donc je ne peut pas mettre de onload sur les images :s

[SpaceFrog]

donc je ne peut pas mettre de onload sur les images

Ha bon pourquoi donc ?

Code :

$('<div id="dialogBox"></div>').appendTo('body').html('un contenu html avec image <img src="Source.gif" onload ="....">');

sinon avec jquery:

Code :

1
2
3
 
$('<div id="dialogBox"></div>').appendTo('body').html('un contenu html ">');
$('#dialogbox').append($('<img />').attr('src','source.gif').load(function(){ ...})

[neoxen]

pour ce qui est du onload sur l'image ce n'est pas possible car c'est un contenu dynamique qui est chargé ( il peut y avoir 1,2,3 ou X image en chargement )

Donc pour la deuxième solution ce n'est pas non plus possible :s.

Mon but et de charger un contenu html.

Imaginons je suis sur un formulaire, je fais des vérifications et la j'ai une erreur. La dialog box s'affiche avec un texte préformaté html, d'ou l'impossibilité de mettre des onload

[SpaceFrog]

je ne vois toujours pas de contre indications qu'il y ait une ou 15 images
il suffit d'incrémenter un compteur pour savoir quand la dernière image est chargée ???

Sinon l'idéal serait de passer par un evènement jquery avec un callBack comme load ...
Si tu peux générer coté serveur ton bout de code html ...

[danielhagnoul]

Envoyé par neoxen

Ma question est donc, peut-on attendre le chargement complet d'une div avant de regarder sa hauteur et sa largeur ?

Bonjour

Je vous suggère d'étudier le code de cet exemple : http://www.developpez.net/forums/d82...y/#post5830691.

[neoxen]

merci pour le lien danielhagnoul, je n'est pas trouvé ce que je cherché mais je vais étudier un peu le système je pense avoir eu une idée

[danielhagnoul]

Je pensais que l'exemple du positionnement (en deux étapes) du dialogue modal reteindrait votre attention. Mais si vous avez trouvé mieux...

Extrait :

Code :

1
2
3
4
5
6
7
8
9
10
                objPopup
                    .css("width", popupWidth)
                    .prepend('<img src="http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/close_pop.png" class="popup-btn-close" title="Close Window" alt="Close" />')
                    .css({
                        // Si l'on regroupe les deux blocs CSS, le popup n'est pas bien positionné
                        // Le popup doit avoir sa taille définitive avant le calcul de outerHeight et de outerWidth
                        "margin-top":  -objPopup.outerHeight(true)/2,
                        "margin-left": -objPopup.outerWidth(true)/2
                    })
                    .fadeIn();

[neoxen]

j'ai effectivement vu cet exemple mais j'ai procéder autrement

dans mon objet de creation de la dialog box j'ai fait comme ceci :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
this.create=function(){
	$('<div id="shadow_'+ config.boxId +'"></div>').appendTo('body').css({
	    'width':config.widthPage,
	    'height':config.heightPage,
	    'position':'absolute',
	    'background-color':config.backgroundShadow,
	    'top':0,
	    'left':0
	}).hide().fadeTo('normal',config.backgroundOpacity);
	if(config.ajaxPage!=null && config.ajaxPage!='')
	{
	    $('<div id="'+config.boxId+'" class="dialogBox"></div>').load('ajax/'+config.ajaxPage,config.ajaxParams,function(){
		if(config.disabled_close===false){
		    if(config.idClose==null)config.idClose='close_'+config.boxId;
		    $(this).prepend('<div id="'+ config.idClose +'">'+config.close_txt+'</div>');
		}
		elm.replaceBox();
	    }).appendTo('body');
 
	}
	else
	{
	    $('<div id="'+config.boxId+'" class="dialogBox"></div>').appendTo('body').html(config.content).hide();
	    if(config.disabled_close===false){
		if(config.idClose==null)config.idClose='close_'+config.boxId;
		$('#'+config.boxId).prepend('<div id="'+ config.idClose +'">'+config.close_txt+'</div>');
	    }
	    elm.replaceBox();
	}
    }
 
    this.replaceBox=function(){
	config.widthBox=$('#'+config.boxId).width();
	config.heightBox=$('#'+config.boxId).height();
 
	config.left=((config.widthScreen-config.widthBox)/2)+config.widthScroll;
	config.top=((config.heightScreen-config.heightBox)/2)+config.heightScroll;
 
	$('#'+config.boxId).css({
	    'left':config.left,
	    'top':config.top
	}).fadeIn();
    }

tout fonctionne nickel la box se positionne comme il le faut , c'est nickel

en tout cas merci de votre aide

[danielhagnoul]

Bonjour

En fait vous utilisez la même recette , vous créez un dialogue invisible et puis vous appelez la méthode replaceBox() pour ajuster sa position (CSS) et finalement le rendre visible.

[neoxen]

ha ok autant pour moi j'ai du mal lire le code

En tout cas merci pour l'aide :p