If the image is not loaded by the time you call .height() function it returns 0. Since your code is run right after the ajax request is completed browser has no idea what is the size of that images.
Tip: You could bind a .load() event to your images and change the size of that particular image on its load. ---- Read jQuery HowTo Resource - http://jquery-howto.blogspot.com On Sat, Jan 17, 2009 at 5:34 PM, David .Wu <chan1...@gmail.com> wrote: > > My process is > 1. load images from other php file > 2. put the response thing into a div > 3. check all image sizes > 4. resize image if the size over the restriction > > the problem is sometimes images resize failed, how to make sure the > resize process work. > > html code > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// > www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > <title>demo</title> > <style> > <!-- > div#slide > { > width:100px; > height:50px; > overflow:hidden; > } > div#slide ul > { > margin:0px; > padding:0px; > list-style:none; > } > div#slide li > { > float:left; > } > --> > </style> > <script type="text/javascript" src="js/jquery-1.2.6.js"></script> > </head> > > <body> > <div id="slide"></div> > <script language="javascript"> > <!-- > $(document).ready(function() > { > $.ajax( > { > url:'ajax.php', > type:'get', > cache:false, > success:function(data) > { > /* > data will response html > <ul> > <li><img src="1.jpg"></li> > <li><img src="2.jpg"></li> > <li><img src="3.jpg"></li> > </ul> > */ > $('div#slide').html(data); > }, > complete:function() > { > $h = 40; /* images hight restriction */ > /* resize the image */ > $('div#slide img').each(function() > { > if($(this).height() > $h) > $(this).height($h); > }); > } > }); > }); > //--> > </script> > </body> > </html>
