JavaScript的衰落內容

在這個網站上我想淡出/動畫時，該網站是開放一些東西：http://www.coaching-starnberg.de/neu JavaScript的衰落內容

爲了這樣做，我用這個片段：

$(document).ready(function() { 
$('img.start').each(function(index) { 
if (index == 0) { index = 1; index+=1;} 
$(this).animate({opacity: "0.0"}).delay(600*index).animate({opacity: "100.0"}, 9999); 
index+=1; 
});

的HTML狀態元素被設置爲可見，並通過JavaScript隱藏。我使用這個，因爲我想成爲可見的所有情況，JavaScript在瀏覽器中被禁用。

現在我注意到，JavaScript之前隱藏元素的時間很長。這意味着，你看到的一切出現在第二的分裂它隱藏，然後消失了。

如何我減少這種時間間隔，這樣就不會首先顯示的內容？`

謝謝你們！

來源

2013-09-29 Max

問題是，您顯示的是默認的元素，並且只有在整個文檔加載完畢後才隱藏它們（並開始淡化）。

相反，您應該使用不依賴於正在加載的文檔的非JavaScript解決方案。通常使用的技術是一類「非JS」添加到<html>元素，並在<head>您啓動一個腳本，僅僅做到這一點：

document.getElementsByTagName('html')[0].className = "";

然後在CSS，你可以設置所有的元素你想要隱形，併爲每個只需添加：

.no-js [element] { 
    visibility: visible; 
}

只要<head>是由瀏覽器和JavaScript解析啓用，「無-JS」級將從html元素被移除。

來源

2013-09-29 13:20:59

感謝您的快速回復Stephan，no-js類的解決方案聽起來很甜！我會深入研究這一點，但我想這將解決我所有的問題。 – Max

只要你使用JavaScript，你將永遠有延遲。你最初需要用CSS隱藏你的內容。這是因爲你依賴於$（document）.ready的邏輯。這意味着瀏覽器首先加載html，css和所有javascript，然後開始執行你的js代碼。通常這些事情應該用CSS完成。

來源

2013-09-29 13:20:26 Krasimir

感謝克拉西米爾，你的回答讓我瞭解問題的根源。 – Max

Stephan Muller的回答是一個解決方案。

但我的需要，我發現它更容易使用CSS3 關鍵幀：

.element { animation: fadein 2s; 
-moz-animation: fadein 2s; /* Firefox */ 
-webkit-animation: fadein 2s; /* Safari and Chrome */ 
-o-animation: fadein 2s; /* Opera */ 
} 
@keyframes fadein { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-moz-keyframes fadein { /* Firefox */ 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-webkit-keyframes fadein { /* Safari and Chrome */ 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-o-keyframes fadein { /* Opera */ 
    from { 
     opacity:0; 
    } 
    to { 
     opacity: 1; 
    } 
}

來源

2013-10-01 19:03:01 Max

這也是一個不錯的方法。我目前正在研究一個需要no-js警告的網站，並且我正在考慮做同樣的事情來增加一點額外的延遲:) –

JavaScript的衰落內容

回答

相關問題