0

I have images of various dimensions and I wish to lazyload them. For example: (without lazyload)

<img src='200x200.jpg' />

(with lazyload)

<img class='lazy' src='16x16loading.gif' data-original='200x200.jpg' />
<script type='text/javascript'>$('img.lazy').lazyload();</script>

Before they are successfully loaded, I want to display a loading gif in its place. However I also want its dimension to settle to the desired dimension prior to the image finishing loading, but NOT the gif dimension itself as the low-definition gif will be quite ugly with a zoom.

So translating the above into points:

  • adding width=200px will stretch the rotating gif into a very ugly big one.
  • not doing so will let the rotating gif occupy ONLY 16x16 of whitespace until 200x200.jpg is loaded.
  • Making a 16x16loading.gif into actually a 200x200.gif (according to my own noob attempt), increased its file-size by 770% from 1.7kb to 14.8kb.

So is there a way to show a rotating loading gif in its original dimension but let it take up as much whitespace as I like, possibly with CSS?

Lim
  • 329
  • 2
  • 15
  • I'm guessing that you're asking how to replace a loading GIF with another image and then change its dimension? Merely setting only one of width or height will do that. – reisio Apr 27 '13 at 07:57
  • Hi @reisio, thank you but I'm asking more than that ><' I want to change the dimension already before that, specifically maybe you can visit [here](http://www.milktee.nu/media/loading.gif) and [here](http://www.milktee.nu/media/loading_225x281.gif). I want to show the latter but without the increased file size... – Lim Apr 27 '13 at 08:07
  • Thanks for the edit by the way :p – Lim Apr 27 '13 at 08:41
  • You want to increase the size of a smaller image? – reisio Apr 27 '13 at 09:57
  • Hi @reisio I've answered your question with an edit, hope this makes it clearer? – Lim Apr 28 '13 at 09:30
  • Ah. Yes, one way would be to set the initial smaller image as a CSS background image of the img element, and both can then have independent sizes. – reisio Apr 28 '13 at 10:44

0 Answers0