I mean, I want to clone the image to another place with the image resize finished, for example I load three images by ajax
1.jpg height 200px 2.jpg height 350px 3.jpg height 400px and my restriction is 180, therefore, images will resize to my rule successfully, and I want to clone it in another table at the same page, so I use jQuery clone function, the first three images resize successful but the clone one become the origin size, I guess it clone the image before it's resized, so how do I do the clone function after the resize function truly be executed. On 1月18日, 上午1時07分, jQuery Lover <ilovejqu...@gmail.com> wrote: > Didn't get exactly what you meant, but if you want to do something > when loading has finished then put it into the load() function. > > .load(function(){ > // your code > > }); > > ---- > Read jQuery HowTo Resource - http://jquery-howto.blogspot.com > > On Sat, Jan 17, 2009 at 9:53 PM, David .Wu <chan1...@gmail.com> wrote: > > > I got one more question, actually I need to clone the result of $td1 > > into another $td2, how to do it after the load function "finish". > > > $img1.load(function() > > { > > $(this).each(function() > > { > > if($(this).height() > $h) $(this).height($h); > > }); > > }); > > > $tbl1.clone().prependTo($td2); > > > On 1月18日, 上午12時43分, "David .Wu" <chan1...@gmail.com> wrote: > >> aha, I understand, it's work, thanks :) > > >> $img1.load(function() > >> { > >> $(this).each(function() > >> { > >> if($(this).height() > $h) $(this).height($h); > >> }); > > >> }); > > >> On 1月17日, 下午9時21分, jQuery Lover <ilovejqu...@gmail.com> wrote: > > >> > 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>