PDA

View Full Version : I have a problem with a preloader (javascript)


dobbies
06-15-2011, 09:14 AM
Could somebody help me with this code.

The problem I am trying to solve is: I have a webcam image on my site with a 5 second refresh rate. Some of the time it fails to show and I want to place a preloader for those times.

I have found a script that someone kindly pulished for general use and it 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) and when I published the page the GIF works fine. The problem is that the image that is 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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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;
}
-->
</style>
<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
$(this).hide();
$('#loader').removeClass('loading').append(this);
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
}).attr('src', 'http://www.flickr.com/2405/2238919394_4c9b5aa921_o.jpg');
});

//-->
</script>
</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>

johnMoss
06-16-2011, 04:33 AM
That line of code should work, but I assume you're aware the link is defunct? (page not found)...
Why not go get that GIF and simply call the image up locally?

dobbies
06-16-2011, 09:26 AM
That line of code should work, but I assume you're aware the link is defunct? (page not found)...
Why not go get that GIF and simply call the image up locally?

Hi John,

Thanks for your time and effort it's appreciated.

I assume you copied the URL into a browser to find that the image is defunct but at least it is a link that works (to nothing) if you see what I mean. However, applying the the code in an HTML page, the GIF works but the link doesn't disrgarding what the link might be.

I cannot call the image I want locally because again it's a URL link to my webcam image.

Were you able to test the code?

Thanks

dobbies
06-17-2011, 09:55 AM
Well I guest sometimes you have to learn by the seat of your pants and that's what I'm doing. I also guess that i didn't have too many replies because there wasn't anything wrong with the code so really there was nothing to reply to.

After the immence amount of time I've spent on this problem I dicovered that before anything will work in "jquery" you first have to load it.

I had no idea until I came across a snippit that struck a chord. I have now downloaded the latest file and "voila" it works.

Cheers

Corrosive
06-17-2011, 10:40 AM
Yep, you didn't get much guidance because the code looks fine. Glad you got it sorted though.

jmichae3
06-30-2011, 11:11 PM
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function refreshimage() {
var img = new Image(640,480);
img.src='blah.jpg';//apply new source image url here

//this is where the "pop" takes place
document.getElementById('i').src=img.src;
}
setInterval(refreshimage,5000);

</script>
</head>

<body>
<img src="some.png" id="i" width="640" height="480"></div>
</body>
</html>


this will update every 5 seconds.