SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast kriscahya's Avatar
    Join Date
    Jul 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ask:Jquery Loader

    Hi guys,

    is there any jquery that can handle page loader at the first time the webpage its click, my website consist of several jquery that will take time to view correctly so first time visitor will see it a bit messy, so i would like to cover it up with a loading animation untill all jquery files and css files finish loading from my webhosting server.

    thank you

  2. #2
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should simply be able to create an element which covers your page so the user can't see the loading happening behind it.

    The trick will be timing the event which will hide this element. You can try simply do this in a $(document).ready function; which might be enough depending on how things in your site are layed out. I personally also try to define widths and heights of as many elements in a sites layout as possible, which prevents things from shifting around as the page loads.

  3. #3
    SitePoint Enthusiast kriscahya's Avatar
    Join Date
    Jul 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, I'm not an expert in java coding, so I'm gonna need a bit more detail explanation hehe, so i just simply put this code on top of my other scripts ?

    <script type="text/javascript">
    $(document).ready(function(){
    </script>

  4. #4
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would have to think about the element a bit, but off the top of my head I would try something like this.

    In your css:
    Code CSS:
    #blanket {
        width: 100%;
        height: 100%;
        z-index: 1000;
        background-color:white;
    }

    Then for the actual element, something like this:
    Code PHP:
    <div id="blanket">Loading...</div>

    Then I'd place the script tag at the foot of your document:
    Code PHP:
    <script type="text/javascript">
    $(document).ready(function() {
        $('#blanket').hide();
    })
    </script>

    Some things might need to be tweaked a bit in the css, and in trying to have everything loads before the code runs, but hopefully this will give you somewhere to start.

  5. #5
    SitePoint Enthusiast kriscahya's Avatar
    Join Date
    Jul 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    whoa thanks I'll give it a try

  6. #6
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,077
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Covering everything up like this would indeed work, but please take care that people with javascript disabled (or running NoJS or the like) will never see your website, but just div covering everything up.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  7. #7
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Scallio has a really good point...

    It might be better to make the element hidden in the css, and use javascript to display it immediately at the start of your page. This would mean that users who do not have javascript would not get stuck at a covered up page.

    The css would look like this instead:

    Code CSS:
    #blanket {
        width: 100&#37;;
        height: 100%;
        z-index: 1000;
        background-color: white;
        display: none;
    }

    And then in your markup you could put:
    Code PHP:
    <div id="blanket">Loading...</div>
    <script type="text/javascript">
        $("#blanket").show();
    </script>
    Last edited by benzittlau; Jul 15, 2010 at 16:46. Reason: Fixing inconsistent quote types.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •