如何在加載時延遲背景圖片

我知道如何在加載時延遲元素，但我有一個奇怪的來自客戶端的請求。他們希望背景圖片在頁面加載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; 

}

任何幫助非常感謝！

來源

2014-09-04 Eric Brockman

#Primary和#primary。讓它們成爲相同的案例 – Christina 2014-09-04 06:56:43

謝謝@Christina – 2014-09-05 00:02:02

你能做到這樣使用的setTimeout爲」

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

來源

2014-09-04 05:47:37

謝謝，不知道我是否做錯了什麼，但是當我使用上面的代碼塊時，背景圖片加載立即。 CSS從'background：none'變爲'background：url（文件夾/路徑）'，但沒有任何延遲。 – 2014-09-05 21:40:53

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

您可以使用設定的時間超時，但你不會這樣獲得淡入效果。或者你可以

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

來源

2014-09-04 06:04:25

謝謝，至於第一個例子;不知道我做錯了什麼，但是當我使用上面的代碼塊時，立即加載背景圖片。 CSS正在從background：none改爲background：url（文件夾/路徑），但沒有延遲。至於第二個例子;如果我沒有弄錯，我將不得不在CSS中設置元素的不透明度，這將使整個元素'#primary .bcg'淡入淡出，而不僅僅是背景圖像，是否正確？ – 2014-09-05 21:49:10

如何在加載時延遲背景圖片

回答

相關問題