Question

I am using Jquery Lazy Load plugin to load images lazily when they come in the viewport of browser.

In place of the original image, I just place an animated loader gif. However because there is a difference in the dimensions of the animated loader gif & original image I see the original image shrinked in size.

I want to make the loader gif hold the entire space that would have been used by original image to be placed. (loader gif is 32*32 px & original img is 800*400px)
So I want that the image rendered by the code below should always occupy 800*400px space without the loader image scaling up to that size. I think that is possible through CSS, but I dont know how? Could you please guide me on this ?

<img class='lazy' data-original='/module_files/l.jpg' src='/loader.gif'/>

Answer 1

http://jsfiddle.net/uNbMN/1/

There are a lot of ways to solve this, but just using a single img tag and no js I don’t think there is a very good way. You can’t tell an img to center inside itself, because you are setting the actual dimensions. You could do something like this with two classes.

img.lazy {
    height: 400px;
    width: 800px;
    border: 1px solid black;
}

img.loader {
    height: auto;
    width: auto;
    /*You would have to account for loader dimensions here*/
    padding: 200px 400px 200px 400px;
}

If you really want to do this I would consider separating ‘loader’ from the image completely and placing it in its own, separate element.