Grow your CSS skills. Land your dream job.

Loading image wont display on some pages

  • # April 26, 2013 at 3:45 pm

    I’m trying to display a loading image on my website but it only works for two separate pages. I use the following Jquery bellow to display the loading image and hide the content while everything is loading, then display the content when it’s finished loading.

    $(window).load(function() {
    $(“#spinner”).hide();
    $(“#hide”).show();
    })

    This works for only two pages but it doesn’t work for the rest. I checked the code more than 10 times and even switched the order external files are aligned in my HTML code to see if it would work but nothing :P. I also examined everything of the working pages and duplicated it for the non-working and still nothing.

    Are there any common mistakes that would cause the code above to not work?

    # April 26, 2013 at 3:57 pm

    I know what you mean, but the script you posted above HIDES the spinner (and shows the content) once the page is done loading, so that doesn’t help us to see why it doesn’t show before the page is done loading in the first place.

    # April 26, 2013 at 3:59 pm

    @senff the spinner is suppose to be seen once the page appears on the users screen. and the body has display:none;. The Jquery code hides the spinner only after everything has finished loading, and shows the body after loading is complete.

    # April 26, 2013 at 4:02 pm

    I know that, but the part of your code above only relates to HIDING the spinner after everything has finished loading. It has nothing to do with the way the spinner is being shown in the first place, so it’s impossible for us to tell why it doesn’t.

    # April 26, 2013 at 4:03 pm

    > and the body has display:none;

    And the #spinner isn’t part of the body?
    Might be helpful to see (the relevant) parts of your markup.

    # April 26, 2013 at 4:05 pm

    @Netsurfer i actually wrapped all the content inside a div and left the spinner outside that div. And everything inside that div is being hidden. Not the spinner because it’s outside the div.

    @Senff the spinner is being shown as a regular image. it’s simply there. Then the Jquery hides the image when the page has finished loading.

    EDIT: if you click “themes” and “drawings” tab you can see a loading image that hides and everything on that page is displayed at onece. It only works for those two pages but not for the rest.http://reallycoolstuff.net/PROJECTS/harol/index.html

    # April 26, 2013 at 4:09 pm

    Sorry, but can’t help unless we see the pages in question.

    # April 26, 2013 at 4:09 pm

    @senff i posted the page, see post above.

    # April 26, 2013 at 4:19 pm

    It also worked for me on the ABOUT page.

    Isn’t it just a “problem” that the “Loading” image is just not shown because the page loads (too) fast? Keep in mind that the image itself also needs time to load, so if it’s still loading when the rest of the page is done loading, then you won’t see it of course.

    With Javascript disabled (and so no script can turn off your spinner and show the content), the spinner shows on all pages.

    # April 26, 2013 at 4:28 pm

    I also see it for “About Me”. especially when i empty the cache. But it shows the images loading. it’s not supposed to do that. Everything loads first, then the content is displayed. And for the “Completed Projects” it doesn’t display at all. I also slowed down the disappear and appearance of the pages to 10seconds(slow motion). And it actually was functioning. I could see the loading image disappear and the content appearing for 10 seconds. But when its at 0 seconds it doesn’t seem to work.

    # April 26, 2013 at 9:37 pm

    I also found out something new. If i slow down the process to 5 seconds you can see that for “drawings” and “themes” the images simply pop into view without sliding in like the rest. But for the non-working pages everything slides in from the left. http://reallycoolstuff.net/PROJECTS/harol/index.html
    any particular reason why that’s happening?

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".