javascript - 如何制作标题背景图片onload事件的动画？

我希望标题背景图片在加载时进行动画处理。我已经做到了

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

最佳答案

您可以使用隐藏的img标签以及指向该图像的链接。然后加载后将设置background-url。加载时可以使用svg微调器（例如https://loading.io/）和opacity：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

关于javascript - 如何制作标题背景图片onload事件的动画？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43649272/