Search code examples
javascriptjqueryhtmlcsspreloader

How can I set Pre-load image on image loading from Server

I need to start a spinner before loading an image from the server.

My HTML page contains

<img src="/imge/abc1.jpg" />
</br>
<p>This tesst text</p>
<img src="/imge/anyname.jpg" />
</br>
<p>This tesst text</p>
<img src="/imge/any.jpg" />
</br>
<p>This tesst text</p>
<img src="/imge/allname.jpg" />
</br>
<p>This tesst text</p>

And I want it to show a spinner whilst image loads, like Facebook. So I need to replace <img> to a spinner image until the real image is loaded

Solution

  • if you want to do it by CSS Just Write code on your <head> tag

    <style type="text/css">
img {
    min-width:50px; /* if load.gif have 50px width */
    min-height:50px; /* if load.gif have 50px height */
    background: url('load.gif') no-repeat;
}
</style>