使用jQuery.load（）将内容加载到div中，如何使新图像在加载时淡入？

Question

我正在尝试实现以下目标：我有一个div，在该div上我使用load（）方法来获取新的HTML内容。

 $('#mydiv').load('/newcontent.html');

这个新的HTML还包含图像，我希望这些图像在加载后能够淡入。

首先，我尝试将回调函数与load（）方法一起使用，但是该函数会在抓取HTML之后，浏览器加载所有新图像之前立即触发。

然后，我尝试在所有新获取的图像上应用on（'load'）事件，但这根本不起作用。

$('#mydiv').load('/newcontent.html', function() { 
    $('#mydiv img').css('visibility','hidden').on('load', function() { $(this).fadeIn(); });
});

“可见性：隐藏”效果很好，因此我的新HTML内容已加载到#mydiv中，并且所有图像均设置为不可见。 但是淡入效果不起作用。 实际上，我尝试绑定到此的事件确实会在加载新HTML时触发（这对我来说没有任何意义），但不会在加载单个图像时触发。

我该如何解决？ 任何帮助表示赞赏！

Answer 1

使用fadeIn（）和fadeOut（）淘汰jQuery。 而且，如果您要在加载时进行操作，则可以使用该事件。