隱藏元素，直到頁面完成加載 - 使用jquery

我剛寫了一個簡單的代碼來隱藏所有的元素，直到頁面加載完成並顯示一個指標時加載..（它的工作）。隱藏元素，直到頁面完成加載 - 使用jquery

所以我要求的是要知道我是否做得對，你會建議什麼。

HTML

<body> 
    <div class="loading"> 
     <img src="indicator.gif"/> 
    </div> 

    <div class="content"> 
     <!-- page content goes here --> 
    </div> 
</body>

jQuery的

$(document).ready(function(){ 
     $(".content").hide(); 
    }); 

    $(window).load(function(){ 
     $(".loading").fadeOut("slow"); 
     $(".content").fadeIn("slow"); 
    });

來源

2011-09-13 Sam

你可能想隱藏從一開始的內容div來避免依賴於什麼正在加載的頁面上的任何可能的頁面閃爍。

<body> 
    <div class="loading"> 
    <img src="indicator.gif"/> 
    </div> 

    <div class="content" style="display: none;"> 
    <!-- page content goes here --> 
    </div> 
</body> 


$(window).load(function(){ 
    $(".loading").fadeOut("slow"); 
    $(".content").fadeIn("slow"); 
});

來源

2011-09-13 09:50:15 njr101

好抓！有道理。 – Sam

在此Javascript略有改善是在淡出使用回調所以在開始淡出時淡出已完成。這給你一個更平滑的過渡。

<body> 
    <div class="loading"> 
    <img src="indicator.gif"/> 
    </div> 

    <div class="content" style="display: none;"> 
    <!-- page content goes here --> 
    </div> 
</body> 


$(window).load(function(){ 
    $(".loading").fadeOut("slow", function(){ 
    $(".content").fadeIn("slow"); 
    }); 
});

來源

2014-02-18 11:06:42 nidal

隱藏元素，直到頁面完成加載 - 使用jquery

回答

相關問題