JQuery的，試圖刷新

我談論這個網站時，這裏沒有我的動畫背景圖片：malcolmtanti.com JQuery的，試圖刷新

我使用這個功能：

<script> 
    var image = new Image(); 
    image.onload = function() { 
    $('header').animate({opacity: 1}, 2000); 
    } 
    image.src = "./images/background.jpg"; 
</script>

動畫我的主要背景圖像的fade in和標題等。它應該在我的CSS中的頭元素淡入淡出。

這是CSS：

header{ 
    position: relative; 
    background: url(../images/background.jpg) no-repeat top center; 
    background-size: cover !important; 
    -webkit-background-size: cover !important; 
    /*height: 700*/ 
    top:50px; 
    min-height:95%; 
    max-width: 100%; 
    overflow: hidden; 
    opacity:0;  
}

出於某種原因，我第一次訪問該網站，圖片加載適合我，但是當我按刷新，標題標籤的不透明度剩餘0。怎麼會這樣？

來源

2016-11-27 Malcolm Tanti

它正在爲我工作，嘗試添加一個調試器onload事件，看看它是否在圖像加載時進入內部？ –

也可以嘗試使用Chrome和邊緣移動'image.src'上述onload事件 –

IM？您是否使用不同的瀏覽器@RehbanKhatri我會嘗試，太多 –

這樣，當你刷新頁面它不火，因爲動畫這可能是與瀏覽器緩存圖像的問題圖像已經預加載。

嘗試用一個唯一的ID（如當前時間）加載圖像，以防止這一點。

<script> 
    var image = $('<img/>'); 
    var srcText = './images/background.jpg?t=' + new Date().getTime(); 
    image.attr('src', srcText).load(function() { 
    $(this).remove(); 
    $('header').animate({opacity: 1}, 2000); 
    }); 
</script>

來源

2016-11-27 07:48:28

問題是，我不想等待底部的項目加載它之前負載。一旦圖像加載，我希望它立即加載。因此，我避免了大圖像的漸進式加載 –

完美的作品！這是如何運作的？是因爲日期/時間參數int srcText var？因此，每次我猜測它都必須加載一個新圖像？對？ –

-1

U均具有用於從（鏈接標記，腳本標籤）中的href =「http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css」和類似這樣的腳本的src中的鏈接。不要這樣使用。複製上面的鏈接的代碼，並把它放在你的文件夾中，並參考當地鏈接..

來源

2016-11-27 07:29:36

JQuery的，試圖刷新

回答

相關問題