View Full Version : Help please with this code

06-15-2011, 03:30 PM
Could somebody help me with this code.

My objective is:- I have a webcam image on my site with a 5 second refresh rate. Some of the time the image fails and I want a preloader to kick in at those times to indicate that something is happening.

I found a script that someone pulished for general use http://jqueryfordesigners.com/demo/image-load-demo.php and their example works just fine. I'm using IE9 & FF.

I copied the code into a new DW php page and changed the authors animation GIF to one I created (preloader.gif). When I published the page the GIF works fine but the problem is that the image that's supposed to superimpose the animated gif doesn't show. I've tried changing the URL (on line 38 within DW) but I get the same result (blank).

I would be grateful if someone could have a look at the code for me and tell me what's wrong.

Many thanks

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
< html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
< head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Image Loading</title>
<style type="text/css" media="screen">
BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
H1 { margin-bottom: 2px; }
DIV#loader {
border: 1px solid #ccc;
width: 400px;
height: 400px;
overflow: hidden;
DIV#loader.loading {
background: url(preloader.gif) no-repeat center center;
<script src="/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var img = new Image();
$(img).load(function () {
//$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
}).error(function () {
// notify the user that the image could not be loaded
}).attr('src', 'http://farm3.static.flickr.com/2405/2238919394_4c9b5aa921_o.jpg');

< /head>
< body id="page">
<h1>Image Loading</h1>
<p>This demonstration shows how to pre-load an image in the background while showing a loading screen. It also supports loading the image, then running additional code, such as Ajax requests before finally showing the image.</p>
<p><a href="http://www.flickr.com/photos/remysharp/">More (http://jqueryfordesigners.com/image-loading/) photos...</a></p>
<!-- this is just a way to simulate a delay (the script will sleep for 2 seconds then response) -->
<script src="image-load-demo.php?action=delay" type="text/javascript" charset="utf-8"></script>
< /body>
< /html>

06-30-2011, 04:59 AM
first off, your xhtml tags are all broken. don't have a space between the < and the tag name.

xhtml's css is case sensitive. don't use upper case tags or it won't work, remember xhtml uses lower case tags. the author was wrong in this respect (I wish I could tell him how to fix his article, but I can't make a comment). at least for ff 5.0.

remove the comment tags from the style section, it causes style to not render. I don't know if that's a bug in ff 5 or not. it might be.

you are missing the crucial div/whatever tag in the example at http://jqueryfordesigners.com/image-loading/
it doesn't matter what tag you use, as long as it has id="loader" and class="loading" (due to the way the code is written - see the classReplace of loading and that it mainly applied to the element with an id "#loading").

read the code about 30 times and you will learn more about jquery programming, especially after you start digging into the jquery documentation.
I did - I'm just starting.

for instance, .fadeIn(0) doesn't do a gradual fade-in, it pops image in place. 2000 takes 2 seconds.