# How to wait for an image to be loaded?

**URL:** <https://www.ruby-forum.com/t/how-to-wait-for-an-image-to-be-loaded/57125>\
**Category:** Rails\
**Created:** [April 7, 2006, 11:42am UTC](https://www.ruby-forum.com/t/how-to-wait-for-an-image-to-be-loaded/57125 "2006-04-07T11:42:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![g0nzo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3bc359/32.png) [@g0nzo](https://www.ruby-forum.com/u/g0nzo)\
**Post date:** [April 7, 2006, 11:42am UTC](https://www.ruby-forum.com/t/how-to-wait-for-an-image-to-be-loaded/57125/1 "2006-04-07T11:42:07Z")

</div>

Hi!

I’m making a simple gallery, which uses simple javascript for changing  
‘src’ attrbiute of ‘img’ element.

How to wait for an image to be downloaded completely before trying to  
display it and while browser downloads this image display a spinner gif  
or ‘please wait’ message etc.?

Something like this: [Siter](http://siter.com.au/dmitry/images.html).

---

<div class="post-metadata">

**Author:** ![g0nzo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3bc359/32.png) [@g0nzo](https://www.ruby-forum.com/u/g0nzo)\
**Post date:** [April 7, 2006, 12:28pm UTC](https://www.ruby-forum.com/t/how-to-wait-for-an-image-to-be-loaded/57125/2 "2006-04-07T12:28:08Z")

</div>

szymek wrote:

> 

This should work, but I haven’t had cause to try it… Load the  
high-res image into a hidden img tag, whose onload handler swaps the  
spinner’s src attribute for its own. Alternatively, if you’ve got  
control over the images, you could be polite to your users and use an  
interlaced file format. Not as Web2.0, but much, much cleaner.

---

<div class="post-metadata">

**Author:** ![g0nzo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3bc359/32.png) [@g0nzo](https://www.ruby-forum.com/u/g0nzo)\
**Post date:** [April 7, 2006, 12:31pm UTC](https://www.ruby-forum.com/t/how-to-wait-for-an-image-to-be-loaded/57125/3 "2006-04-07T12:31:12Z")

</div>

Place the img tag in a div with a spinner as background???

On Friday, April 07, 2006, at 11:26 AM, Alex Y. wrote:

> > Something like this: [http://siter.com.au/dmitry/images.html](http://siter.com.au/dmitry/images.html).  
> > Rails mailing list  
> > removed\_email\_address@domain.invalid  
> > [http://lists.rubyonrails.org/mailman/listinfo/rails](http://lists.rubyonrails.org/mailman/listinfo/rails)

Mikkel B.

www.strongside.dk - Football Portal(DK)  
ting.minline.dk - Buy Old Stuff!(DK)

---

<div class="post-metadata">

**Author:** ![g0nzo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3bc359/32.png) [@g0nzo](https://www.ruby-forum.com/u/g0nzo)\
**Post date:** [April 7, 2006, 4:44pm UTC](https://www.ruby-forum.com/t/how-to-wait-for-an-image-to-be-loaded/57125/4 "2006-04-07T16:44:34Z")

</div>

Thanks, i didn’t know that img handles onload event.