裝載DIV只引薦

可見我已經得到了我想要解決我的網站上的一個小問題。我有那麼目前出現的網頁上面加載屏幕div時用戶訪問，然後在設定的時間後消失/加載頁面時，以先到者爲準最新。我希望這個div只在第一次訪問時出現，並且寧願避免cookie或任何服務器端。根據我的理解，我想利用會話存儲或引用，但沒有成功實施。另外，隨後的頁面會有一個不太明顯和更快的加載屏幕，只有在會話期間每個單獨頁面被訪問過一次時纔會消失。適用的代碼是：裝載DIV只引薦

CSS：

.js div#preloader { 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 1000; 
    width: 100%; 
    height: 100%; 
    overflow: visible; 
    background-color: #202020;} 

#preloader { 
    z-index: 1000; }

JS：

jQuery(document).ready(function ($) { 
$(window).load(function() { 
    setTimeout(function(){ 
     $('#preloader').fadeOut(1500, function() { 
     }); 

    },5000); 

    }); 
});

所以，這可能很明顯，我不靈通;我正在教自己，不用說我有很多東西要學習javascript。如果我在這裏做了一些可怕的錯誤，這是完全合理的，或者需要一個工作演示，請告訴我。

謝謝！

來源

2015-09-02 bulbo

JavaScript可能無法實現這一目標的最佳途徑。你在服務器端使用什麼？它是一個靜態HTML頁面還是由後端（例如PHP或.NET）呈現？「僅在首次出現時出現」是什麼意思？你的意思是每個會話或曾經有一次？ –

你很可能是對的，我也願意接受其他選擇。這是一個靜態的html文檔，如果有意義的話，加載頁面應該在每頁每個會話中出現一次。 – bulbo

你或許可以完成你想要使用the sessionStorage object什麼。在該對象中，您可以跟蹤當前會話中訪問過哪些頁面。

您可以用JavaScript運行的問題（以及我說這可能不是最好的方法）的原因是，使用庫時，加載庫時總會有一定的時間，解析並執行。這使得您的「僅在首次訪問時出現」需求在JavaScript中難以完成。如果您默認顯示它並用庫代碼隱藏它，則每次進入頁面時都會短暫顯示。如果您默認隱藏它並使用庫代碼顯示它，那麼在您第一次進入頁面時將會暫時隱藏它。處理這種

一種方法是使用爲預加載的DOM被定義後立即執行嵌入的JavaScript。這樣做的缺點是你必須知道如何在沒有像jQuery這樣的庫的幫助下編寫跨瀏覽器JavaScript。在你的情況下，簡單地隱藏預加載器所需的JavaScript很簡單，它不應該有任何跨瀏覽器問題。

我創建了一個簡單的頁面，演示了該技術。此頁面的源代碼是：

<html> 
<head> 
<style> 
#preloader { 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 1000; 
    width: 100%; 
    height: 100%; 
    overflow: visible; 
    color: white; 
    background-color: #202020; 
} 
</style> 
</head> 
<body> 
<div id="preloader">Preloader</div> 
<script> 
if (sessionStorage[location.href]) { 
    document.getElementById('preloader').style.display = 'none'; 
} 
sessionStorage[location.href] = true; 
</script> 
<p>This is the text of the body</p> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script> 
$(function() { 
    setTimeout(function(){ 
     $('#preloader').fadeOut(1500); 
    }, 5000); 
}); 
</script> 
</body> 
</html>

我還爲它小提琴：http://jsfiddle.net/cdvhvwmm/

來源

2015-09-02 17:31:30

是的！這很奇妙。準備好了這一點，但我唯一的問題是，在瞬間，我可以看到我的網頁上的div。任何線索爲什麼會這樣？ – bulbo

這是因爲「時間有限的」，就需要對嵌入的JavaScript運行和隱藏的。嵌入式JavaScript將盡可能縮短時間，但很難完全消除它。有一些選項可以改善這一點。一種可能是將預加載器默認隱藏起來，並在JavaScript中反轉邏輯（以便第一次顯示它，而不是隨後隱藏它）。另一種可能是在CSS中使用一個轉換來淡入，所以JavaScript有機會在它完全可見之前隱藏它。 –

很有意義。我試圖自己實現這一點，但沒有成功。任何演示機會？ – bulbo

裝載DIV只引薦

回答

相關問題