Question

我想在点击图片时加载父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预装图像，显示远程内容。

Answer 1

替换父元素的HTML时，会分离单击的图像。元素在处理函数中以this存在，但它没有附加到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');
  })
});

如果您不想覆盖整个内容，则需要执行不同的操作。如果不知道你想做什么，很难说清楚到底是什么！

Answer 2

也许尝试这样的事情？：

$(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);
    });  
  });
});

jquery load（）与进度图像问题

2 个答案: