带有进度图像问题的jquery load

如何解决带有进度图像问题的jquery load

| 我想在点击图片时加载父div的远程内容。 在等待内容加载时，我想显示一个进度图像， 现在这段代码有什么问题？ 如果我用预加载图像注释该行，则一切正常。

$(document).ready(function() {
  $(\"img.taskzoom\").click(function() {
    $(this).parent().html(\'<img src=\"prog.png\"/>\');
    alert(\'alert does n\\\'t help\');
    $(this).parent().load(\'test.PHP\');
  })
});

test.PHP：

<?PHP sleep(3); echo \'server content\';?>

//澄清// 使用预加载图像时，预加载图像显示，但不显示远程内容。 WO预加载图像，显示远程内容。     

解决方法

替换父元素的HTML时，将分离单击的图像。元素在处理函数中以ѭ2的形式存在，但未附加到DOM。因此，当您调用

parent

时，找不到父元素，因此

load

调用不起作用。 如果要覆盖父元素的全部内容，则需要缓存父元素：

$(document).ready(function() {
  $(\"img.taskzoom\").click(function() {
    var parent = $(this).parent();
    parent.html(\'<img src=\"prog.png\"/>\');
    alert(\'alert isn\\\'t necessary now\');
    parent.load(\'test.php\');
  })
});

如果您不想覆盖整个内容，则需要做一些不同的事情。在不知道要做什么的情况下很难说出确切的内容！     ,也许尝试这样的事情？：

$(document).ready(function() {
  $(\"img.taskzoom\").click(function() {
    var $parent = $(this).parent();
    $parent.html(\'<img src=\"prog.png\"/>\');
    $(this).parent().load(\'test.php\',function(response,status,xhr) {
       $parent.html(response);
    });  
  });
});