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

Question

我正在尝试实现以下目标：我有一个 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。如果您想在加载时执行此操作，请使用该事件。