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>
