View Full Version : "Loading" Icon Not Working

11-15-2012, 10:43 PM
Simply put, I can't get the "loading" icon to appear while the gallery images are being loaded:


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


(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!

11-16-2012, 05:08 AM
maybe someone else has coded this before?

Thank you!

A basic demo:

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

11-16-2012, 09: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?

11-16-2012, 11:23 PM
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.