如何用CSS/JavaScript/jQuery实现body背景图平滑淡入加载？

方法一：纯CSS实现 #

用全屏伪元素承载背景图，初始完全透明，通过CSS动画实现2秒淡入，body默认设为白色背景作为初始状态，完全不影响页面内容。

body {
  margin: 0;
  background-color: #fff; /* 初始白色背景 */
}

/* 全屏背景层，放在内容下方 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/back350llll.jpg) repeat;
  background-size: cover; /* 按需调整背景尺寸属性 */
  z-index: -1;
  opacity: 0;
  animation: fadeInBg 2s ease-in forwards; /* 2秒淡入，结束后保持最终状态 */
}

@keyframes fadeInBg {
  to {
    opacity: 1;
  }
}

你可以根据需求修改background-size、repeat等属性，和原来的设置完全兼容。

方法二：JavaScript/jQuery实现 #

如果要确保背景图加载完成后再开始淡入（避免出现淡入到一半图片才显示的情况），用JS预加载图片更稳妥。

原生JS版本 #

body {
  margin: 0;
  background-color: #fff;
  background: url(../img/back350llll.jpg) repeat;
  background-size: cover;
  opacity: 0;
  transition: opacity 2s ease-in;
}

// 预加载背景图
const bgImage = new Image();
bgImage.src = "../img/back350llll.jpg";

// 图片加载完成后触发淡入
bgImage.onload = function() {
  document.body.style.opacity = "1";
};

jQuery版本 #

body {
  margin: 0;
  background-color: #fff;
  background: url(../img/back350llll.jpg) repeat;
  background-size: cover;
  opacity: 0;
}

// 等页面所有资源加载完成后执行淡入
$(window).load(function() {
  $('body').fadeTo(2000, 1); // 2000毫秒=2秒，淡入到完全不透明
});

内容的提问来源于stack exchange，提问作者Leandro