JQuery preloader_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-19 16:22 出处：网络

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 a

相关专题：jquery

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>

JQuery preloader

精彩评论

关注公众号

热门标签

图文推荐

JQuery preloader

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：