Question

我希望我的标题背景图片应该在加载时设置动画。我已经完成了这个

.header_area{
    background-image: url(../img/mobility_solutions.jpg);
    min-height: 100vh;
    background-repeat: no-repeat;	
    background-size: 100% 100%;
    background-position: center center;
    animation: shrink 3s;
}

@keyframes shrink {
    0% {background-size: 110% 110%;}
    100% {background-size: 100% 100%;}
}

这是有效的，但不是在浏览器中第一次加载页面时。如何将其与始终加载事件对齐？

您可以在此处查看 - http://demogenesystel.mywebkitchen.com/

Answer 1

您可以使用隐藏的img标记以及此图片的链接。之后它将加载set background-url。加载时可以使用svg微调器（例如https://loading.io/）和不透明度的css类：0

//javascript:
var hiddenImg = $('<img />').addClass('hidden')
hiddenImg.attr('src', ....)
hiddenImg.bind('load', function(){
  $(this).addClass('show'))
  var yourTarget = $('..');
  yourTarget.css('background-image', 'url(' + your url + ')');
})
//css
img.hidden {  opacity: 0; }

PS：你不需要为此使用jQuery Javascript callback for knowing when an image is loaded

Answer 2

您需要使用一些简单的JS来检测元素的background-image URL，并将其作为虚拟<img />标记的一部分加载，以便您可以将onload事件附加到它检测是否已成功加载相同的图像。

background-image提取需要一些简单的替换，因为它实际上返回整个url(/path/to/image)字符串，有时带有可选的引号。因此，我们可以使用与此匹配的模式：

^url\(["']?(.*?)["']?\)$

基本上，模式尝试在开始时匹配url(，使用可选的倒置逗号，后跟介于两者之间的任何内容，然后是另一个可选的倒置逗号和右括号)。第一个捕获组将是您的背景图像URL。 You can see how it works here

当我们这样做时，我们将src属性分配给虚拟<img />元素此值。当此元素触发load事件时，我们会添加类.header_area--animate，它会应用您为.header_area元素定义的动画。

当然可以在JS中编写这个完整的逻辑，但既然你已经标记了jQuery，为什么不呢？ ;）

$(function() {
  $('<img />', {
    src: $('.header_area').css('background-image').replace(/^url\(["']?(.*?)["']?\)$/gi,'$1')
  }).on('load', function() {
    console.log('Image loaded, adding animation');
    $('.header_area').addClass('header_area--animate');
  });
});

.header_area {
  background-image: url("http://deelay.me/1000/http://placehold.it/1000x500");
  min-height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  
}
.header_area--animate {
  animation: shrink 3s;
}

@keyframes shrink {
  0% {
    background-size: 110% 110%;
  }
  100% {
    background-size: 100% 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_area">

</div>

如何动画标题背景图像onload事件？

2 个答案: