加载图标作为背景图像加载

Question

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

如何检查背景图像（使用背景图像CSS标签应用）是否已完成加载？

Answer 1

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

这是一个显示该技术的工作示例：

＆＃13;

＆＃13;

<script>
$(".top-nav li").click(function(){
    $(".top-nav ul").slideToggle(500, function(){
           $(this).hide();
    });
});
</script>

＆＃13;

$(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;
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;