Sam*_*Sam 9 html jquery loading hide
我只是编写了一个简单的代码来隐藏所有元素,直到页面完成加载并在加载时显示一个指示符..(它的工作原理).
所以我要求的是知道我做得对,你会建议什么.
HTML
<body>
<div class="loading">
<img src="indicator.gif"/>
</div>
<div class="content">
<!-- page content goes here -->
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
jQuery的
$(document).ready(function(){
$(".content").hide();
});
$(window).load(function(){
$(".loading").fadeOut("slow");
$(".content").fadeIn("slow");
});
Run Code Online (Sandbox Code Playgroud)
njr*_*101 14
您可能希望从一开始就隐藏内容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");
});
Run Code Online (Sandbox Code Playgroud)
这个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");
});
});
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
19225 次 |
| 最近记录: |