jquery - 在加载背景图像时加载图标

Question

背景图片需要一些时间来加载。

如何检查背景图片(使用 background-image CSS 标签应用)是否已完成加载？

Answer 1

默认情况下，您可以将加载图标包含为默认背景图像，然后在加载缓慢的图像下载后通过 javascript 更新 CSS。

这是一个展示该技术的工作示例:

$(document).ready(function() {
  var imgSrc = 'https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg';
  var img = new Image();
  img.onload = function() {
    $("div").css("background-image", "url('" + img.src + "')");
  };
  img.src = imgSrc;
});

div {
  background-color: orange;
  padding: 50px;
  color: purple;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>.
  <p>This div will have a solid color as background to begin with.</p>
  <p>Watch its background change to an image once it's loaded.</p>
</div>