jQuery:如何在大背景图像之前加载显示加载图形，在CSS中设置，加载然后让背景图像淡入？

Question

我正在重新设计我的个人网站，并使用全尺寸图像作为网站的背景。加载时间比网页的其余部分要长得多，而且我无法再减小文件大小，所以......
使用 jQuery，我想在后台显示动画加载 gif，直到图像加载，然后淡入图像。
我有以下 jQuery 代码，可以很好地淡入图像；

$(document).ready(function(){ 
   $('#bodybg').fadeIn(2000);
});

我想考虑向 css id 添加一个类，然后将加载图像分配给该类，并在图像加载后让 jQuery 删除该类。像这样:

$('#bodybg') .removeClass('loading')

但我有点坚持将其完全采用有效的格式？有人可以帮忙吗？

Answer 1

您可以尝试为fadeIn添加回调函数。

$("#bodybg").fadeIn(2000, function(){
  $("#bodybg").removeClass('loading');
})