...

View Full Version : "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
maybe someone else has coded this before?

Thank you!

A basic demo:


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum