CODEWITHSUNDEEP
javascriptjquery
Jurudocs
Jurudocs

Reputation: 9175

Best way to insert loader icon if images has not been fully loaded?

given the html structure:

<div class="image-container">
    <img id="firstslide" src="img/verybig.jpg">
</div>

I wonder if there is an easy and simple way to check

  1. if an image is currenly being loaded and insert into div a load icon and
  2. has finished loading and show the fully loaded picture

Any hints with that?

Upvotes: 1

Views: 874

Answers (5)

Jonathan Payne
Jonathan Payne

Reputation: 2223

jsFiddle: http://jsfiddle.net/FjfvZ/60/

If you're using jQuery:

<div id="loading">Loading</div>
<img id="image" src="image.png" style="display:none"/>

<script>
    $('#image').load(function()
    {
        $('#loading').hide();
        $(this).show();
    });
</script>

Upvotes: 2

KARASZI Istv&#225;n
KARASZI Istv&#225;n

Reputation: 31467

I would do it from CSS, as setting the loader animation image as the background of the selected images:

CSS:

img.loader {
  background: url(loader.gif) 50% 50% no-repeat;
}

HTML:

<div class="image-container">
  <img id="firstslide" class="loader" style="width: 100px; height: 100px;" src="img/verybig.jpg" alt=""/>
</div>

Upvotes: 3

Ram
Ram

Reputation: 144709

this provides a simple n good solution:

http://www.appelsiini.net/projects/lazyload

Upvotes: 0

j08691
j08691

Reputation: 207953

You could use a small loading image as the background image which will be covered up by the actual image once it has loaded.

Here's a jsFiddle example.

Upvotes: 1

Code Maverick
Code Maverick

Reputation: 20415

I use an image preloader plugin:

http://www.farinspace.com/jquery-image-preload-plugin/

This will give you control to do whatever you want to do.

Upvotes: 1

Related Questions