Question

我希望在我网站的标题中通过不透明的彩色屏幕显示背景图像。背景图像在CSS文件中设置并进行优化，因此不能缩小尺寸。当缓存清除时，即使在非常快速的互联网连接（~150 mbps）上进行全面优化，您也可以看到图像缓慢加载。

所以我的问题是：有没有办法延迟不透明度 - 即使用背景屏幕的纯色版本 - 直到背景图像完全加载，然后切换到不透明版本？我在想可能有一个JS / jQuery解决方案，但我仍处于基本水平，而且我的搜索很少。我尝试了一个CSS动画延迟，但这不是很理想，因为它取决于实时，而不是在已知图像被加载时。

我愿意接受其他建议。非常感谢任何帮助。

Here is a JSFiddle演示了HTML和CSS，下面还有一个嵌入式示例。

.bg-wrapper {width: 500px; height: 250px; background: url(https://unsplash.it/2000/1000); background-position: 50% 0%; background-size: cover;}
.bg {width: 100%; height: 100%; background: #FF4136; background: rgba(255,65,54,0.9)}

<div class="bg-wrapper">
	<div class="bg">
	</div>
</div>

Answer 1

是的，将不透明背景移动到单独的类，然后使用JS，创建新的Image()，将图像URL指定为src并在该图像上使用onload事件将opaque类添加到.bg元素。

如果您要淡化不透明度更改，请使用opacity上的.bg代替rgba()并转换opacity属性。

var img = new Image();
img.onload = function() {
  document.getElementsByClassName('bg')[0].classList.add('opaque');
}
img.src = 'https://unsplash.it/1000/500?image=763';

.bg-wrapper {
  width: 500px;
  height: 250px;
  background: url(https://unsplash.it/1000/500?image=763);
}

.bg {
  width: 100%;
  height: 100%;
  background: #FF4136;
  opacity: 1;
  transition: opacity .5s;
}

.opaque {
  opacity: .9
}

<div class="bg-wrapper">
  <div class="bg">
  </div>
</div>

Answer 2

你可以这样，使用伪元素和图像加载事件，它从CSS规则中读取图像路径...更新，以定位元素数组

(function(el){
  el.forEach(function(e) {
    var style = e.currentStyle || window.getComputedStyle(e, false),
    bi = style.backgroundImage.slice(4, -1).replace(/["|']/g, "");
    var img = new Image();
    img.onload = function() { e.classList.add('loaded'); }
    img.src = bi;  
  });
})(document.querySelectorAll('.bg-wrapper'));

.bg-wrapper {
  position: relative;
  width: 500px;
  height: 150px;
  background: url(http://lorempixel.com/500/200/nature/1/);
  background-position: 50% 0%;
  background-size: cover;
}
.bg-wrapper.nr2 {
  background: url(http://lorempixel.com/500/200/nature/2/);
}
.bg-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 1;
  transition: opacity 2s;
}
.bg-wrapper.loaded::before {
  opacity: 0.9;
}

.bg-wrapper * {
  position: relative;    /*  this make content stay ontop  */
}

<div class="bg-wrapper">
 <div>
   This is content.....
 </div>
</div>

<div class="bg-wrapper nr2">
 <div>
   This is content.....
 </div>
</div>

延迟背景颜色不透明度，直到加载背景图像

2 个答案: