jquery，ajax中怎么让图片加载完毕后再执行程序？

代码如下：
$('#line').click(function(){
$("#photoGallery").empty();
var ids= $(this).attr("id");
$.post("getPhoto.php", {"activedr" : ids}, function(data){
$("#photoGallery").html(data);
afterLoadPhoto();   
});
return false;
});本意是点击后从服务端获取图片信息展现在页面上，然后再调用afterLoadPhoto()方法来对图片进行处理（会用到ctx.getImageData方法），现在问题是由于图片比较多也比较大，执行到afterLoadPhoto()会报错（是ctx.getImageData报错，原因应该是图片还未全部加载完成），我尝试将afterLoadPhoto();改成setTimeout(loadPhoto, 7000);就不会报错（因为预留了时间用于加载完成）
请教各位高手，如何能保证所有图片加载完毕后再执行afterLoadPhoto()方法呢？

解决方案 »

  1.   

    可以尝试使用$.ajax()方法，参数async设置为false;(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
      

  2.   


    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="gb2312" />
    <title></title>
    </head>
    <body>
    <script>
    var img = new Image;
    img.src = 'http://avatar.profile.csdn.net/7/F/3/2_xuyi1979.jpg';
    img.onload = function(){
    // 需要执行的程序
    document.body.appendChild(img);
    }
    </script>
    </body>
    </html>
    不知道 是不是这个意思？参考下new Image
      

  3.   

    可以使用JS方法动态加载图片，然后利用img对象的onload事件来判断所有的图片是否已加载完成，具体可以这样处理：
    指定post()方法的dataType参数为"script"，getPhoto.php输出一段JS代码（这里用伪代码说明一下思路）：
    var ar = []; //建立一个数组对象，然后将所有需要加载的图片标识符存入这个数组
    ar.push('img1');
    ar.push('img2');
    ....//再循环加载所有的图片
    var obj = document.createElement('img');
    obj.src = 'img1';
    obj.onload = function() {
       //删除ar数组中对应的元素
      //将自身添加到文档树中
      //判断ar数组的长度，长度为0时说明全部图片已经加载完成，执行afterLoadPhoto()
    }
      

  4.   

    再次说明一下，由于我的代码中afterLoadPhoto()是对多个图片的统一处理，因此尽量不要用onload()事件
      

  5.   


    多个图片跟使用img对象的onload有什么关系呢？不使用onload你怎么能知道所有图片都已加载呢？
      

  6.   


    如果你能知道共有多少图片的话，可以用一个计数器统计有多少个图片加载完了，如果都加载完了，就调用afterLoadPhote。像这样(只是示意，懒得查jquery的文档了）：
    var total = 10; // 共有10个图片$('img').onload(function() {
      total --;
      if (total == 0) {
        afterLoadPhoto();
      }
    });
      

  7.   

    刚发现我这个其实和3楼的办法一样。csdn怎么不让删自己的帖子呢?