How can make the preload image the same size of the real image

Question

I have a webpage including some images with different width and height, to improve speed of loading the page, I want implement the lazy loading. But the default preloaded picture always has different size of real picture since I do not know the size of picture before loading. How can I make the preload image the same size of the real image?

<script type="text/javascript" src="<?php echo G_STATIC_URL; ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo G_STATIC_URL; ?>/js/jquery.lazyload.min.js"></script>

$(function() {

        $("img").each(function() {
            $(this).attr("data-original",$(this).attr("src"));
            $(this).attr("src", "<?php echo G_STATIC_URL; ?>/common/loading_b.gif");
        });

        $("img").lazyload({
            placeholder : "<?php echo G_STATIC_URL; ?>/common/loading_b.gif",
            effect : "fadeIn"
        });
    });

Answer 1

You cannot find the dimensions of an image using Javascript until it has fully loaded.

If your HTML is being rendered on a server, you could print the width and height of each images directly into the image tag:

<img src="..." width="<?= $width ?>" height="<?= $height ?>" />

Another option would be to use a standard ratio for each pre-loading box, and resize your loaded image to fit within this ratio, at least then nothing changes shape at image-load time.