加载图标为背景图片加载 [英] Loading icon as background image loads

问题描述

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

如何检查背景图片（使用background-image CSS标签应用）是否已完成加载？ / p>

解决方案

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

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

  $ ）.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;颜色：紫色font-weight：bold;}  

 < script src = https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"> ;</script> ;<div> < p>此div将以纯色作为背景。< / p> < p>< / div>  
 

>

The background image takes some time to load.

How can I check if the background image (applied using the background-image CSS tag) has finished loading?

解决方案

You can include the loading icon as the default background image by default and then update the CSS via javascript once the slow-loading image has downloaded.

Here's a working example showing the technique:

$(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>

这篇关于加载图标为背景图片加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！