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>

Reply via email to