11548 sujets

JavaScript, DOM et API Web HTML5

Recuperer la hauteur d'une image sous en JS ?[résolu]

salut tout le monde,

if(enclosure)
{
type_image=enclosure.getAttribute('type');
url_image=enclosure.getAttribute('url');
At=type_image.indexOf('image');
var test_image=false;
if(At != -1)
{	
     div_image=Builder.node('img',{src:url_image,style:'float:left;margin:5px;'});
  test_image=true;

}
}
else
{
if(site.indexOf('feedburner') == -1)
{
image_description= description.firstChild.nodeValue.indexOf("<img");
if(image_description != -1 )
{
image_description=description.firstChild.nodeValue.substring(image_description,description.firstChild.nodeValue.length);
image_description=image_description.substring(0,image_description.indexOf('>')+1);
cote=image_description.substring(image_description.indexOf('src='),image_description.indexOf('src=')+5);
cote=cote.substring(4,5);
lien_image=image_description.substring(image_description.indexOf('src='+cote)+5,image_description.length);
url_image=lien_image.substring(0,lien_image.indexOf(cote));
test_image=true;
[#red]div_image=Builder.node('img',{src:url_image,style:'float:left;margin:5px;'});[/#]
}
}
}
									//plus=Builder.node('span',{id:'plus_'+(nbFlux).toString()+'_'+i,className:'le_plus'});
//plus.innerHTML='+';
resume=Builder.node('div',{id:'p_'+(nbFlux).toString()+'_'+i,className:'lecteur_p'});
text_resume=description.firstChild.nodeValue.stripTags().substring(0,100);
//alert(text_resume);
if(description.firstChild.nodeValue.stripTags().length > 100)
{
text_resume=text_resume.substring(0,text_resume.lastIndexOf(' '));
text_resume+='...';
}
resume.innerHTML=text_resume;
div_item=Builder.node('div',{className:'item'});
if(test_image)
{
//div_image.width=div_image.width / 2;
//div_image.height=div_image.height / 2;
div_item.appendChild(div_image);
[#red]										hauteur=div_image.height;
rapport=hauteur/div_image.height;
[/#]							
if(div_image.width > 180)
{
if(div_image.width > 250)
{
hauteur=rapport * 200;
div_image.width=200;
}
br=Builder.node('div',{style:"height"+hauteur+";clear:left;"});
div_item.insertBefore(br,div_item.childNodes[1]);
margin=(230-div_image.width)/2;
div_image.style.marginLeft=margin+'px';
}
}

voila mon code, qui marche sous FF et non sous IE , je ne comprend pas pouequoi la variable 'hauteur' est egale a 0 sous IE
auriez vous une idée svp ?
Modifié par hakkou (04 Jun 2007 - 11:38)
Essaye (vu que tu utilise Scriptaculous, donc Prototype) de faire 
rapport=hauteur/Element.getHeight(div_image)
ton image est elle chargé?
test un 
alert(div_image.complete)

Ca te dira true si l'image est chargé (donc la taille est dispo).

Sinon... ton image fait elle parti du document (document.body.appendChild(div_image)??) car si ça n'est pas le cas, il est possible que IE te renvoie des valeurs nul pour cette raison!
elle n'est pas dans le body , je m'en soutait que IE allez chipoter mais bon faut que je trouve un truc assez propores niveau algorithmique ^^
merci de ton aide Smiley biggrin
je reviens ^^
j'ai essayer de "tricher" pour voir si c'etait le souci , en fait je met mes image des le debut dans le body je traite aprés je les deplace le souci c'est le complete est toujours false et donc pas moyen de traiter Smiley bawling
Au lieu d'utiliser le Builder.node, essaye

var div_image = new Image();
div_image.src = url_image;
Element.setStyle({float:'left',margin:'5px'});
Essaye de lancer la suite de ton script une fois que tu es sur aue ton image est bien chargé (complete).
Tu lance un fonction dans le genre

fonction suiteCode(image) {
    if (image.complete) {
        //... la suite de ton code
    } else {
        setTimeout("suiteCode(image)", 500);
    }
}


J'ai eu ce problème il y a peu et en faite cette solution permet d'executer le code que si ton image est bien chargée!
Modifié par MoOx (01 Jun 2007 - 09:53)
le setTimeout c'est pour relancer la methode c'est ca ?
je ne pense pas que je puisse faire ca puisque y'a d'autre image qui viennent derriere
en fait le principe c'est que je charge unflux rss et je recupere les image soir de la balise <enclosure> ou soit dans la balise <description> et donc si il'image est trop grande ba je l'a retrecie ca marche aleatoirement sous FF et pa du tout sous IE
Salut,

Il est inutile et peu efficace d'utiliser un setTimeout. L'événement "load" de l'image est fait pour ça. Smiley smile 
image.onload = function() {
  // Suite du code
};
merci de ta reponse,
je ne peux pas integrer un onload directement a une fonction ?
par exemple

function toto()
{
 //....
 image=Builder.node...
   image.onload()=function()
    {}
}

ca execute le onload ?
Modifié par hakkou (01 Jun 2007 - 10:31)
voila j'ai resolu le probleme que pour FF Smiley decu
j'ai mis 

if(test_image)
{
//div_image.width=div_image.width / 2;
//div_image.height=div_image.height / 2;
[#red]while(!div_image.complete)
{
}
alert(div_image.complete)
[/#]
div_item.appendChild(div_image);
hauteur=div_image.height;
rapport=hauteur/div_image.height;
if(div_image.width > 180)
{
if(div_image.width > 250)
{
hauteur=rapport * 200;
div_image.width=200;
}
br=Builder.node('div',{style:"height"+hauteur+"px;clear:left;"});
div_item.insertBefore(br,div_item.childNodes[1]);
margin=(230-div_image.width)/2;
													div_image.style.marginLeft=margin+'px';
}

}

un peu bourrin mais je trouve pas autre moyen :s
quelqu'un aurait des idées pour IE svp ?
Modifié par hakkou (01 Jun 2007 - 14:45)
donc comme tout les moyens sont bon pour me sortir de la j'ai mis sur mon image
Event.observe(div_image,'load',setImage);

et la methode

function setImage(e)
{
	imag=Event.findElement(e,'img');
	hauteur=imag.height;
	rapport=hauteur/imag.height;

		if(imag.width > 180)
		{
			if(imag.width > 250)
			{
				hauteur=rapport * 200;
				imag.style.width=200;
			}
br=Builder.node('div',{style:"height"+hauteur+"px;clear:left;"});
imag.parentNode.insertBefore(br,imag.parentNode.childNodes[1]);
				margin=(230-imag.width)/2;
				imag.style.marginLeft=margin+'px';
		}
}

mais le souci c'est que firebu me dit
a écrit :
setting a property that has only a getter

mais je ne sais pas trop ce que ca veut dir Smiley confus
une idée ?
merci ^^
Modifié par hakkou (04 Jun 2007 - 10:37)
bon aprés moulte essai j'ai (je croi) enfin resussi a battre ces images Smiley fache
le souci etait que Event.Observe me renvoyer un mauvais element :s donc j'ai mis un onLoad direct sur l'image que je voulais et ca semble marcher tranquilement ^^ merci de votre aide Smiley lol
Sujet clos
Aller à