JQuery preloader
I would like to create kind of preloader like they did on that site http://www.solarcentury.co.uk/estimate/?postcode=KT6+4SN so it will give impression that those elements are retrieve from DB could anyone point me at right di开发者_如何学运维rection please,
Many thanks
They are simply showing and hiding animated gifs.
You can make your own here: http://ajaxload.info/
Are you using AJAX to retrieve your data?
EDIT:
If you want to fake the AJAX loading (which, surprisingly, seems to be the case), you can use a setTimeout() at load time which will hide the animated gifs and show the content you were 'loading'.
jQuery(function() {
setTimeout(revealContent, 1250);
});
function revealContent() {
jQuery('.loadingGifs').hide();
jQuery('.content').show();
}
You will want your animated gif elements to have the class "loadingGifs" (or whatever you like, as long as it matches the selector in the JS). The content you want to reveal should also have a common class/selector which has display:none declared in its CSS.
Here's one option using AJAX to load an array of assets. As you can see the images are declared on the HTML but they don't have any source assigned. So the idea is that you use a loop to know when the items on the array are loaded and once they all are loaded you assign them to the respective HTML tag.
You can also display the asset as soon as it's loaded, but this is a good option for small widgets inside a big page:
<html>
<body>
<div id="container">
<header></header>
<div role="main">
<img id="img1" width="200" height="200"/>
<img id="img2" width="200" height="200"/>
<audio controls="controls" id="song"></audio>
<p id="loading-txt">LOADING...</p>
</div>
<footer></footer>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
(function() {
var vars = {
//URLS
assets_url : ["images/img1.jpg", "images/img2.jpg", "audio/song.mp3"],
//DESTINIES
destinies : [$("#img1"), $("#img2"), $("#song")],
//MESSAGE
loading_txt : $("#loading-txt")
};
//Calls assignSrc() once all the assets are loaded
var loadAssets = function() {
for(var i = 0; i < vars.assets_url.length; i++) {
var _assetsLoaded = 0;
$.ajax({
url : vars.assets_url[i],
success : function() {
_assetsLoaded++;
vars.loading_txt.text("ASSETS LOADED: " + _assetsLoaded);
if(_assetsLoaded === vars.assets_url.length) {
assignSrc();
}
}
});
}
}
//Assigns the asset source once the load is complete
var assignSrc = function() {
for(var i = 0; i < vars.destinies.length; i++) {
vars.destinies[i].attr("src", vars.assets_url[i]);
}
}
loadAssets();
})();
</script>
</body>
加载中,请稍侯......
精彩评论