Question

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?

Answer 1

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>