"Loading" Icon Not Working

thanser · 11-15-2012, 09:43 PM

Simply put, I can't get the "loading" icon to appear while the gallery images are being loaded:

http://www.thomashanser.com/product.html

I re-purposed a lot of code and scripts from this site I liked:

http://www.leoacker.com/portfolioi.php

(His pages are .php, mine are .html. I can't see that this is the problem - the scripts aren't writing anything to a database.)

The body tag is calling the class "loading:"

<body id="wrapper" class="loading">

Both wrapper and "loading" are referenced in js/e2sDesk.js

The loader.gif is located in /images and the path is correct in my sylesheet.css:

.loading {
background: transparent url(images/loader.gif) 50% 50% no-repeat;
}

Adding the class loading to the div id=gallery only results in the loader.gif being displayed during image transitions, as if it's positioned BEHIND the gallery div all the time. So that's not it! I need it to appear only while each and every image has loaded.

This "loading" icon feature is critical and the main reason I wanted to use this gallery. I'll keep tinkering with it but I could use some help - maybe someone else has coded this before?

Thank you!

minder · 11-16-2012, 04:08 AM

Quote:

Originally Posted by thanser

maybe someone else has coded this before?

Thank you!

A basic demo:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            #content{
                display: none;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                document.body.removeChild(document.getElementById('divLoading'));
                document.getElementById('content').style.display = 'block';
            }
        </script>
    </head>
    <body>
        <div id="divLoading"><img src="loading.gif" alt="" /></div>
        <div id="content">
            <h1>Put all you page content in this div</h1>
        </div>
    </body>
</html>

thanser · 11-16-2012, 08:19 AM

Close...but the addition of my gallery scripts causes this to break:

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="js/e2sDesk.js" defer></script>

Remove these scripts and your code DOES work.

How do I get around this?

minder · 11-16-2012, 10:23 PM

Quote:

Originally Posted by thanser

Remove these scripts and your code DOES work.

How do I get around this?

The example I posted doesn't need jquery.

I don't know how to get around your jquery problem without spending a lot of time going through your code.