javascript - 如何为标题背景图像 onload 事件设置动画？

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 标签来链接到此图像。之后它将加载设置的背景网址。加载时可以使用 svg spinner(例如 https://loading.io/ )和不透明度为 0 的 css 类

//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