Question

我知道如何在加载时延迟元素，但我有一个来自客户端的奇怪请求。他们希望在页面加载后5秒加载背景图像。我是js的新手，以为我可以轻松地做到，但它没有成功。

我试过这个：

$(document).ready(function() {
    $('#primary .bcg').css( "background", "url(folder/path", function(){
        $(this).delay(5000).fadeIn(400)
        });
});

和此：

$(document).ready(function() {
    $('#primary .bcg').delay(5000).fadeIn(400, function() {
           $('this').css( "background", "url(folder/path")
    });
});

两者都无济于事。有没有办法让这种情况发生？或者更确切地说是新手实现它的方式？

css：

#primary .bcg {
    background: none;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

}

非常感谢您的帮助！

Answer 1

你可以使用setTimeout作为“

这样做

$(document).ready(function(){
   setTimeout(function(){
       $('#Primary .bcg').css('background', 'url(folder/path)');
   }, 5000);    // Delay for 5 seconds
});

Answer 2

$(document).ready(function(){
   setTimeout(function(){
       $('#Primary .bcg').css('background', 'url(folder/path)');
   }, 10000);    
});

您可以使用设置时间超时但不会获得fadeIn效果。或者你可以

$(document).ready(function(){
  $('#Primary .bcg').fadeOut(function() {
     $('#Primary .bcg').css({background : url('folder/path') });
    $('#Primary .bcg').fadeIn(300);
  }, 300);
})

如何在加载时延迟背景图像

2 个答案: