Just open a photo.

[guille]

Hi there... i need a script doing this:

Just when i click a image... a popup or new page opens showing a loading animation before the image shows. Just that, also is important that when loading the image i still can browsing the mail page.

Thanks in advance... and sorry for my bad english.

[StupidScript]

Is the image loading in the background really that big? It takes so long to load that you need a placeholder?

There are, of course, many scripts out there that you could use. Perhaps give this a try, first, and see if it does what you need:

<img src="big_image.jpg" [b]lowsrc="loading_anim.gif"[/b] width=100 height=100 />

Where: "big_image.jpg" (>200kb) is the one that takes a long time to load and "loading_anim.gif" (<10kb) is the animated (and MUCH smaller) image that gives users with a slow Internet connection something to look at while waiting for the big image. With any of the solutions you find, it should be no trouble to continue browsing the page while waiting ... that's the default behavior.

[whoisgregg]

I would take a look at the many popular "lightbox javascripts" out there. That phrase in your favorite search engine should bring up some good results. :)

[guille]

Thanks, i'm implementing your advices. =)

[guille]

"lowsrc" ... not working. Using ie6 and firefox... ie:
[htmlcodetutorial.com...]
(that page not works)...

=(

[Drag_Racer]

You could use AJAX to request the image. this gives you an easy way to fire an event when the image loads.

<script type="text/javascript">
function getImage(img) {
var URL = "/images/" + img;
var image = document.getElementById("myImg");
var request = false;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
request.open("GET", URL, true);
request.onreadystatechange = function() {
if (request.readyState == 2) { // request is sent and starting download
image.src= "/images/placeholder.gif";
}
if (request.readyState == 4) { // download is finished
image.src = URL;
}
}
request.send(null);
}
</script>

<a href="javascript:getImg('fullsize.jpg');"><img id="myImg" src="/images/thumbnail.jpg"></a>