Need Recommendation for a Page Loader (html content)
A client has asked for a page loader, something "attractive" to let the visitor know that the content is on its way. This is for standard html content - text, images, etc.
I have seen a f开发者_StackOverflow社区ew on the web, but many of them are dated and rather clunky. I am looking for something that is not a pain to implement but still looks decent.
Thanks in advance.
It wouldn't be hard to build your own. You could have a page that shows an animated gif and then loads the page using AJAX. You can get some great loading gifs just by searching for something like "AJAX loading image". This may or may not seem easy to you, but it doesn't sound too hard to me if you were using jQuery and PHP.
Example Say you have two files: test1.htm and test2.htm. You want to show the contents of test2 (which take a bit to load) on test1 (which should have the parts of the page that load quickly). Here's the two files I made (this uses jQuery):
test1.htm
<head>
<script language="javascript" type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.get('test2.htm', function(data) {
$('#Content').html(data);
});
});
</script>
</head>
<body>
<div id="Content" >
<img src="ajax-loader-image.gif" />
</div>
</body>
</html>
test2.htm
<h2>Dynamically Loaded Content</h2>
<p>Hello World!</p>
So this should work for what you're planning to do. The important thing is that you try to divide up your page into parts that load quickly and parts that load slowly.
If you want to create attractive loader, then you should go through nice animated image. But I suggest you to use combination of animated image and jQuery, Because in jQuery there is a lot of animation available. You can checkout following link for more details, jQuery Animation API How to add loader
Your HTML like -
<div class="loader"></div>
Your CSS like
.loader {
position: absolute;
margin: 0 auto;
z-index: 9999;
background: url('icon-loader.gif') no-repeat;
top: 50 px;
cursor: wait;
}
Your javascript code like -
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(window).load(function(){
$('div.loading').fadeOut(1000);
});
</script>
加载中,请稍侯......
精彩评论