This may seem like a basic question.
I have a light-weight website and would like to load the whole page at once, so that links to the Home/Contact/... parts of the website will take no time to load.
What would be the best mechanism to implement this?
将这些页面加载到不可见的DIV中,然后在用户单击链接时通过Javascript显示/隐藏它们。
I have setup a basic jsfiddle to show how this can be achieved with jquery
Basically I created this kind of context with html and css:
the css:
<style>
#container { height: 200px; width: 400px; background-color: #CCC; }
h3 { font-size: 20px; padding:5px; }
.button {cursor: pointer; padding:10px; background-color: #EEE; margin:5px;}
.content { position: absolute; width: 400px; height: 100px; background-color: #FFF}
</style>
the html:
<div id="container">
<span id="homenav" class="button">Home</span>
<span id="aboutnav" class="button">About</span>
<br>
</br>
<div id="home" class="content">
<h3>home</h3>
</div>
<div id="about" class="content" style="display: none;">
<h3>about</h3>
</div>
</div>
and then I added some Jquery to make it work:
$('.button').click(function() {
var whereto = $(this).attr("id").replace('nav', '')
$('.content').fadeOut(function() {
$('#' + whereto).fadeIn()
})
})
I hope this solves your problem although there are many other ways to do this.
I originally thought you were referring to having the page only show once all the content had finished loading, however i'll leave this here just incase;
This can be accomplished super easy with jquery with the following code
make sure to reference jquery in the header with :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
and then stick the following in the head of your html
<script>
$('html').hide();
$(document).ready(function() {
$('html').show();
});
</script>
window.onload -< A good place to start
window.onload = function() { /* do everything */
after that look at jQuery 's . show () and use css display: none
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.