HTML Loading Images: Is my algorithm producing too much traffic?

Question

today I've developed an algorithm which loads different images into a simple gallery. The script is creating image tags to "buffer" the images into. Then, JQuery is used to determine, whether the image finished loading. If so, it hides my loading_animation.gif, removes the image tag and shows a div tag with the image set as it's background-image. Basically I'm using the img tag to be able to use JQuery's .load() function. The div tag is used to display the image properly.

My question is: Is the image loaded twice from the net or is it cached by the browser? When I watched my script working, it seemed like the images got cached, but is it always the case? If people disable caching they'd load the images twice, wouldn't they?

Here's my code:

CSS

.imagewrapper .imageholder {
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    float: left;
    overflow: hidden;
    display: none;
}
.imagewrapper .loading_animation {
    width: 150px;
    height: 150px;
    background-image: url(versuchsordner/img/loading_anim.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    float: left;
}
.image_preloader {
    display: none;
}

JQuery

$(document).ready(function() {

    $('.imagewrapper .image_preloader').load(function() {

        $(this).siblings('.loading_animation').fadeOut(function() {
            $(this).siblings('.image_preloader').remove();
            $(this).siblings('.imageholder').fadeIn();
        });
    });         
});

PHP/HTML

<div id="gallery">
        <?php
        $parser = new Parser("","basti",25);
        $entry_id = 87;
        $album = $parser->selectAlbumByEntryId($entry_id, "all");
        foreach ($album->pictures as $picture) {
            ?>
            <div class="imagewrapper">
                <img class="image_preloader" src="<?php echo $picture->originalPath; ?>" />
                <div class="imageholder" style="background-image:url('<?php echo $picture->originalPath; ?>');"></div>
                <div class="loading_animation"></div>
            </div>
            <?php
        }
        ?>
</div>

Answer 1

Your idea should work fine provided some conditions exist:

• the server must set an expiration date (that is not in the past)
• client-side caching must be enabled and nothing interferes with it

Edit: I think this method is better because it goes in line with the user's choice: if the user disables caching, than s/he wants to see the resources each time - and I think one should honour the user choice in this case. Don't forget that the user might be the developer himself checking out how the website loads the first time when things are not cached - something I do a lot.

Answer 2

In my opinion I think its not the best approach.

If you like pre-loading images (that can be very tricky), you should use JS and declare

var img1023 = new Image();

If people disabled caching, well, its gonna download every time from server. But most users will get it in the cache (depends more on the cache tool installed on the web server.)