Image lazy load API


The Image Lazy-Load API exists to deal with the combined issues that arise when combining graphics-heavy sites with responsive web design. It is divorced from CMSs to prevent having to re-implement the back code for each system.

It is not the most advanced of lazy-load systems, but exists accomplishes a couple of key tasks:

Documentation and Examples


We have a fairly large image (10.9MB) that we want to use as a thumbnail. It is too big for desktops and certainly too big for mobiles. We may have many of these images on one page, which will slow it down considerably.

Note that when you loaded this example you have may seen a flash of red background on the image. This red is for demonstration; you set it to a color that will not jar on your design. There is a small, clear 16x9 [or 4x3] pixel png image in this place, allowing us to scale with CSS and hold the aspect ratio. The clear placeholder prevents the page from jumping around while the real image loads.

After the image loads, there may be a case where the user resizes the screen. If the scaled image stays in place, it will be pixelated and look bad. So we watch for window resize events and reload the image if it resizes. Press the "resize" button to see this in action.



examples/01-wide/image.jpg, resize, 16x9

examples/01-wide/image.jpg, crop, 16x9

examples/01-wide/image.jpg, crop-top, 16x9

examples/01-wide/image.jpg, crop-bottom, 16x9

examples/01-wide/image.jpg, resize, 4x3

examples/01-wide/image.jpg, crop, 4x3

examples/01-wide/image.jpg, crop-top, 4x3

examples/01-wide/image.jpg, crop-bottom, 4x3

examples/01-wide/image.jpg, resize, 3x2

examples/01-wide/image.jpg, crop, 3x2

examples/01-wide/image.jpg, crop-top, 3x2

examples/01-wide/image.jpg, crop-bottom, 3x2

examples/01-wide/image.jpg, resize, 1x1

examples/01-wide/image.jpg, crop, 1x1

examples/01-wide/image.jpg, crop-top, 1x1

examples/01-wide/image.jpg, crop-bottom, 1x1

<div id="resize-675b80c15f5c5" data-width="1">
    <div class="row text-center">
        <button class="resize-675b80c15f5c5 btn btn-default">Resize</button><br><br>
    </div>
    <div class="row">
        <div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/16x9.png"
                    class="lazy-load img-responsive"
                    data-strategy="resize"
                    data-src="//assets.euractiv.com/lazy-load/examples/01-wide/image.jpg"
                >
                <div class="caption">
                    <p>examples/01-wide/image.jpg, resize, 16x9</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/16x9.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop"
                    data-src="//assets.euractiv.com/lazy-load/examples/01-wide/image.jpg"
                >
                <div class="caption">
                    <p>examples/01-wide/image.jpg, crop, 16x9</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/16x9.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-top"
                    data-src="//assets.euractiv.com/lazy-load/examples/01-wide/image.jpg"
                >
                <div class="caption">
                    <p>examples/01-wide/image.jpg, crop-top, 16x9</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/16x9.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-bottom"
                    data-src="//assets.euractiv.com/lazy-load/examples/01-wide/image.jpg"
                >
                <div class="caption">
                    <p>examples/01-wide/image.jpg, crop-bottom, 16x9</p>
                </div>
            </div>
        </div>    </div><div class="row">
        <div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/4x3.png"
                    class="lazy-load img-responsive"
                    data-strategy="resize"
                    data-src="//assets.euractiv.com/lazy-load/examples/01-wide/image.jpg"
                >
                <div class="caption">
                    <p>examples/01-wide/image.jpg, resize, 4x3</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/4x3.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop"
                    data-src="//assets.euractiv.com/lazy-load/examples/01-wide/image.jpg"
                >
                <div class="caption">
                    <p>examples/01-wide/image.jpg, crop, 4x3</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/4x3.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-top"
                    data-src="//assets.euractiv.com/lazy-load/examples/01-wide/image.jpg"
                >
                <div class="caption">
                    <p>examples/01-wide/image.jpg, crop-top, 4x3</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/4x3.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-bottom"
                    data-src="//assets.euractiv.com/lazy-load/examples/01-wide/image.jpg"
                >
                <div class="caption">
                    <p>examples/01-wide/image.jpg, crop-bottom, 4x3</p>
                </div>
            </div>
        </div>    </div><div class="row">
        <div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/3x2.png"
                    class="lazy-load img-responsive"
                    data-strategy="resize"
                    data-src="//assets.euractiv.com/lazy-load/examples/01-wide/image.jpg"
                >
                <div class="caption">
                    <p>examples/01-wide/image.jpg, resize, 3x2</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/3x2.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop"
                    data-src="//assets.euractiv.com/lazy-load/examples/01-wide/image.jpg"
                >
                <div class="caption">
                    <p>examples/01-wide/image.jpg, crop, 3x2</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/3x2.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-top"
                    data-src="//assets.euractiv.com/lazy-load/examples/01-wide/image.jpg"
                >
                <div class="caption">
                    <p>examples/01-wide/image.jpg, crop-top, 3x2</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/3x2.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-bottom"
                    data-src="//assets.euractiv.com/lazy-load/examples/01-wide/image.jpg"
                >
                <div class="caption">
                    <p>examples/01-wide/image.jpg, crop-bottom, 3x2</p>
                </div>
            </div>
        </div>    </div><div class="row">
        <div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/1x1.png"
                    class="lazy-load img-responsive"
                    data-strategy="resize"
                    data-src="//assets.euractiv.com/lazy-load/examples/01-wide/image.jpg"
                >
                <div class="caption">
                    <p>examples/01-wide/image.jpg, resize, 1x1</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/1x1.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop"
                    data-src="//assets.euractiv.com/lazy-load/examples/01-wide/image.jpg"
                >
                <div class="caption">
                    <p>examples/01-wide/image.jpg, crop, 1x1</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/1x1.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-top"
                    data-src="//assets.euractiv.com/lazy-load/examples/01-wide/image.jpg"
                >
                <div class="caption">
                    <p>examples/01-wide/image.jpg, crop-top, 1x1</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/1x1.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-bottom"
                    data-src="//assets.euractiv.com/lazy-load/examples/01-wide/image.jpg"
                >
                <div class="caption">
                    <p>examples/01-wide/image.jpg, crop-bottom, 1x1</p>
                </div>
            </div>
        </div>    </div></div>

<script>$(function () {
    'use strict';
    $('.resize-675b80c15f5c5').on('click', function (e) {
        e.preventDefault();
        $(this).parent().parent().find('.row > div').each(function () {
            var el = $(this), w = (el.data('width') % 4) + 1;
            el.data('width', w);
            el.attr('class', 'col-xs-' + (w * 3));
        });
        $(window).trigger('resize');
    });
    $('.nav-tabs a').on('click', function () {
        $(window).trigger('resize');
    });
});</script>


We have a fairly large image (3.6MB) that we want to use as a thumbnail. It is too big for desktops and certainly too big for mobiles. We may have many of these images on one page, which will slow it down considerably.

Note that when you loaded this example you have may seen a flash of red background on the image. This red is for demonstration; you set it to a color that will not jar on your design. There is a small, clear 16x9 [or 4x3] pixel png image in this place, allowing us to scale with CSS and hold the aspect ratio. The clear placeholder prevents the page from jumping around while the real image loads.

After the image loads, there may be a case where the user resizes the screen. If the scaled image stays in place, it will be pixelated and look bad. So we watch for window resize events and reload the image if it resizes. Press the "resize" button to see this in action.



examples/02-tall/image.jpg, resize, 16x9

examples/02-tall/image.jpg, crop, 16x9

examples/02-tall/image.jpg, crop-top, 16x9

examples/02-tall/image.jpg, crop-bottom, 16x9

examples/02-tall/image.jpg, resize, 4x3

examples/02-tall/image.jpg, crop, 4x3

examples/02-tall/image.jpg, crop-top, 4x3

examples/02-tall/image.jpg, crop-bottom, 4x3

examples/02-tall/image.jpg, resize, 3x2

examples/02-tall/image.jpg, crop, 3x2

examples/02-tall/image.jpg, crop-top, 3x2

examples/02-tall/image.jpg, crop-bottom, 3x2

examples/02-tall/image.jpg, resize, 1x1

examples/02-tall/image.jpg, crop, 1x1

examples/02-tall/image.jpg, crop-top, 1x1

examples/02-tall/image.jpg, crop-bottom, 1x1

<div id="resize-675b80c15f6bb" data-width="1">
    <div class="row text-center">
        <button class="resize-675b80c15f6bb btn btn-default">Resize</button><br><br>
    </div>
    <div class="row">
        <div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/16x9.png"
                    class="lazy-load img-responsive"
                    data-strategy="resize"
                    data-src="//assets.euractiv.com/lazy-load/examples/02-tall/image.jpg"
                >
                <div class="caption">
                    <p>examples/02-tall/image.jpg, resize, 16x9</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/16x9.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop"
                    data-src="//assets.euractiv.com/lazy-load/examples/02-tall/image.jpg"
                >
                <div class="caption">
                    <p>examples/02-tall/image.jpg, crop, 16x9</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/16x9.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-top"
                    data-src="//assets.euractiv.com/lazy-load/examples/02-tall/image.jpg"
                >
                <div class="caption">
                    <p>examples/02-tall/image.jpg, crop-top, 16x9</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/16x9.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-bottom"
                    data-src="//assets.euractiv.com/lazy-load/examples/02-tall/image.jpg"
                >
                <div class="caption">
                    <p>examples/02-tall/image.jpg, crop-bottom, 16x9</p>
                </div>
            </div>
        </div>    </div><div class="row">
        <div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/4x3.png"
                    class="lazy-load img-responsive"
                    data-strategy="resize"
                    data-src="//assets.euractiv.com/lazy-load/examples/02-tall/image.jpg"
                >
                <div class="caption">
                    <p>examples/02-tall/image.jpg, resize, 4x3</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/4x3.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop"
                    data-src="//assets.euractiv.com/lazy-load/examples/02-tall/image.jpg"
                >
                <div class="caption">
                    <p>examples/02-tall/image.jpg, crop, 4x3</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/4x3.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-top"
                    data-src="//assets.euractiv.com/lazy-load/examples/02-tall/image.jpg"
                >
                <div class="caption">
                    <p>examples/02-tall/image.jpg, crop-top, 4x3</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/4x3.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-bottom"
                    data-src="//assets.euractiv.com/lazy-load/examples/02-tall/image.jpg"
                >
                <div class="caption">
                    <p>examples/02-tall/image.jpg, crop-bottom, 4x3</p>
                </div>
            </div>
        </div>    </div><div class="row">
        <div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/3x2.png"
                    class="lazy-load img-responsive"
                    data-strategy="resize"
                    data-src="//assets.euractiv.com/lazy-load/examples/02-tall/image.jpg"
                >
                <div class="caption">
                    <p>examples/02-tall/image.jpg, resize, 3x2</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/3x2.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop"
                    data-src="//assets.euractiv.com/lazy-load/examples/02-tall/image.jpg"
                >
                <div class="caption">
                    <p>examples/02-tall/image.jpg, crop, 3x2</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/3x2.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-top"
                    data-src="//assets.euractiv.com/lazy-load/examples/02-tall/image.jpg"
                >
                <div class="caption">
                    <p>examples/02-tall/image.jpg, crop-top, 3x2</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/3x2.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-bottom"
                    data-src="//assets.euractiv.com/lazy-load/examples/02-tall/image.jpg"
                >
                <div class="caption">
                    <p>examples/02-tall/image.jpg, crop-bottom, 3x2</p>
                </div>
            </div>
        </div>    </div><div class="row">
        <div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/1x1.png"
                    class="lazy-load img-responsive"
                    data-strategy="resize"
                    data-src="//assets.euractiv.com/lazy-load/examples/02-tall/image.jpg"
                >
                <div class="caption">
                    <p>examples/02-tall/image.jpg, resize, 1x1</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/1x1.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop"
                    data-src="//assets.euractiv.com/lazy-load/examples/02-tall/image.jpg"
                >
                <div class="caption">
                    <p>examples/02-tall/image.jpg, crop, 1x1</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/1x1.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-top"
                    data-src="//assets.euractiv.com/lazy-load/examples/02-tall/image.jpg"
                >
                <div class="caption">
                    <p>examples/02-tall/image.jpg, crop-top, 1x1</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/1x1.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-bottom"
                    data-src="//assets.euractiv.com/lazy-load/examples/02-tall/image.jpg"
                >
                <div class="caption">
                    <p>examples/02-tall/image.jpg, crop-bottom, 1x1</p>
                </div>
            </div>
        </div>    </div></div>

<script>$(function () {
    'use strict';
    $('.resize-675b80c15f6bb').on('click', function (e) {
        e.preventDefault();
        $(this).parent().parent().find('.row > div').each(function () {
            var el = $(this), w = (el.data('width') % 4) + 1;
            el.data('width', w);
            el.attr('class', 'col-xs-' + (w * 3));
        });
        $(window).trigger('resize');
    });
    $('.nav-tabs a').on('click', function () {
        $(window).trigger('resize');
    });
});</script>


We have a malformatted image that we want to use as a thumbnail. It will not scale properly, resulting in a broken image. This may throw off site design if the image is part of the page flow.

Here you should see that the image falls back to the placeholder.



examples/03-error/error.jpg, resize, 16x9

examples/03-error/error.jpg, crop, 16x9

examples/03-error/error.jpg, crop-top, 16x9

examples/03-error/error.jpg, crop-bottom, 16x9

examples/03-error/error.jpg, resize, 4x3

examples/03-error/error.jpg, crop, 4x3

examples/03-error/error.jpg, crop-top, 4x3

examples/03-error/error.jpg, crop-bottom, 4x3

examples/03-error/error.jpg, resize, 3x2

examples/03-error/error.jpg, crop, 3x2

examples/03-error/error.jpg, crop-top, 3x2

examples/03-error/error.jpg, crop-bottom, 3x2

examples/03-error/error.jpg, resize, 1x1

examples/03-error/error.jpg, crop, 1x1

examples/03-error/error.jpg, crop-top, 1x1

examples/03-error/error.jpg, crop-bottom, 1x1

<div id="resize-675b80c15f7ac" data-width="1">
    <div class="row text-center">
        <button class="resize-675b80c15f7ac btn btn-default">Resize</button><br><br>
    </div>
    <div class="row">
        <div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/16x9.png"
                    class="lazy-load img-responsive"
                    data-strategy="resize"
                    data-src="//assets.euractiv.com/lazy-load/examples/03-error/error.jpg"
                >
                <div class="caption">
                    <p>examples/03-error/error.jpg, resize, 16x9</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/16x9.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop"
                    data-src="//assets.euractiv.com/lazy-load/examples/03-error/error.jpg"
                >
                <div class="caption">
                    <p>examples/03-error/error.jpg, crop, 16x9</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/16x9.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-top"
                    data-src="//assets.euractiv.com/lazy-load/examples/03-error/error.jpg"
                >
                <div class="caption">
                    <p>examples/03-error/error.jpg, crop-top, 16x9</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/16x9.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-bottom"
                    data-src="//assets.euractiv.com/lazy-load/examples/03-error/error.jpg"
                >
                <div class="caption">
                    <p>examples/03-error/error.jpg, crop-bottom, 16x9</p>
                </div>
            </div>
        </div>    </div><div class="row">
        <div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/4x3.png"
                    class="lazy-load img-responsive"
                    data-strategy="resize"
                    data-src="//assets.euractiv.com/lazy-load/examples/03-error/error.jpg"
                >
                <div class="caption">
                    <p>examples/03-error/error.jpg, resize, 4x3</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/4x3.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop"
                    data-src="//assets.euractiv.com/lazy-load/examples/03-error/error.jpg"
                >
                <div class="caption">
                    <p>examples/03-error/error.jpg, crop, 4x3</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/4x3.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-top"
                    data-src="//assets.euractiv.com/lazy-load/examples/03-error/error.jpg"
                >
                <div class="caption">
                    <p>examples/03-error/error.jpg, crop-top, 4x3</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/4x3.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-bottom"
                    data-src="//assets.euractiv.com/lazy-load/examples/03-error/error.jpg"
                >
                <div class="caption">
                    <p>examples/03-error/error.jpg, crop-bottom, 4x3</p>
                </div>
            </div>
        </div>    </div><div class="row">
        <div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/3x2.png"
                    class="lazy-load img-responsive"
                    data-strategy="resize"
                    data-src="//assets.euractiv.com/lazy-load/examples/03-error/error.jpg"
                >
                <div class="caption">
                    <p>examples/03-error/error.jpg, resize, 3x2</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/3x2.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop"
                    data-src="//assets.euractiv.com/lazy-load/examples/03-error/error.jpg"
                >
                <div class="caption">
                    <p>examples/03-error/error.jpg, crop, 3x2</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/3x2.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-top"
                    data-src="//assets.euractiv.com/lazy-load/examples/03-error/error.jpg"
                >
                <div class="caption">
                    <p>examples/03-error/error.jpg, crop-top, 3x2</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/3x2.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-bottom"
                    data-src="//assets.euractiv.com/lazy-load/examples/03-error/error.jpg"
                >
                <div class="caption">
                    <p>examples/03-error/error.jpg, crop-bottom, 3x2</p>
                </div>
            </div>
        </div>    </div><div class="row">
        <div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/1x1.png"
                    class="lazy-load img-responsive"
                    data-strategy="resize"
                    data-src="//assets.euractiv.com/lazy-load/examples/03-error/error.jpg"
                >
                <div class="caption">
                    <p>examples/03-error/error.jpg, resize, 1x1</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/1x1.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop"
                    data-src="//assets.euractiv.com/lazy-load/examples/03-error/error.jpg"
                >
                <div class="caption">
                    <p>examples/03-error/error.jpg, crop, 1x1</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/1x1.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-top"
                    data-src="//assets.euractiv.com/lazy-load/examples/03-error/error.jpg"
                >
                <div class="caption">
                    <p>examples/03-error/error.jpg, crop-top, 1x1</p>
                </div>
            </div>
        </div><div class="col-xs-3" data-width="1">
            <div class="thumbnail">
                <img
                    src="//assets.euractiv.com/lazy-load/placeholder/1x1.png"
                    class="lazy-load img-responsive"
                    data-strategy="crop-bottom"
                    data-src="//assets.euractiv.com/lazy-load/examples/03-error/error.jpg"
                >
                <div class="caption">
                    <p>examples/03-error/error.jpg, crop-bottom, 1x1</p>
                </div>
            </div>
        </div>    </div></div>

<script>$(function () {
    'use strict';
    $('.resize-675b80c15f7ac').on('click', function (e) {
        e.preventDefault();
        $(this).parent().parent().find('.row > div').each(function () {
            var el = $(this), w = (el.data('width') % 4) + 1;
            el.data('width', w);
            el.attr('class', 'col-xs-' + (w * 3));
        });
        $(window).trigger('resize');
    });
    $('.nav-tabs a').on('click', function () {
        $(window).trigger('resize');
    });
});</script>


  1. Include the following script in your web page, after jQuery:

    <script src='//assets.euractiv.com/lazy-load/lazy-load-min.js'></script>

    Alternatively, to enable debugging, use this:

    <script>vsac_lazyload_debug=true<script>
    <script src='//assets.euractiv.com/lazy-load/lazy-load.js'></script>

  2. Change the markup of the images you want to lazy load to look like this:

    <img
            src="//assets.euractiv.com/lazy-load/placeholder/<span class="text-danger">16x9</span>.png"
            class="lazy-load"
            data-strategy="strategy"
            data-src="http://example.com/path/to/image.jpg"
        >

    A couple of notes:
    • src: modify the two numbers to match the aspect ratio that the image should have (width by height). This aspect ratio will be used when resizing the source image.
    • the lazy-load class can be combined with other classes (eg, lazy-load img-responsive) but it must be present.
    • data-strategy is the resizing strategy that should be used when resizing the image. Possible values:
      • resize: stretch to fit in both directions
      • crop: resize to the largest fit on either axis, then crop in the middle to fit the aspect ratio
      • crop-top: like crop, but crops from the top/right of the image (eg, it cuts off the bottom or left of the image)
      • crop-bottom: like crop, but crops from the bottom/left of the image (eg, it cuts off the top or right of the image)
    • data-src is the path to the original image that should be resized. It can be a relative path, an absolute path or a fully qualified url

// A WordPress plugin that will use the lazy load

add_action('wp_enqueue_scripts', function () {
	wp_enqueue_script(
	    'lazy-load',
	    '//assets.euractiv.com/lazy-load/lazy-load.js',
	    array(),
	    '1.0.0',
	    true
    );
});



add_filter('wp_get_attachment_image_attributes', function ($attr, $attachment, $size) {
    $attr['data-src'] = preg_replace('/\-\d+x\d+\./', '.', $attr['src']);
    $attr['data-strategy'] = 'crop';
    $attr['src'] = '//assets.euractiv.com/lazy-load/placeholder/4x3.png';
    $attr['class'] .= ' lazy-load ';
    return $attr;
}, 10, 3);
<pre><code>
// A WordPress plugin that will use the lazy load

add_action('wp_enqueue_scripts', function () {
	wp_enqueue_script(
	    'lazy-load',
	    '//assets.euractiv.com/lazy-load/lazy-load.js',
	    array(),
	    '1.0.0',
	    true
    );
});



add_filter('wp_get_attachment_image_attributes', function ($attr, $attachment, $size) {
    $attr['data-src'] = preg_replace('/\-\d+x\d+\./', '.', $attr['src']);
    $attr['data-strategy'] = 'crop';
    $attr['src'] = '//assets.euractiv.com/lazy-load/placeholder/4x3.png';
    $attr['class'] .= ' lazy-load ';
    return $attr;
}, 10, 3);
</code></pre>

The API will convert image tags in a string of HTML into the markup necessary to make this lazy loader work. It is designed for use by client applications on the server side. The endpoint is:

//assets.euractiv.com/lazy-load/api.php

It accepts the following parameters:

  • image is either:
    1. The URL to the original image that should be resized. It can be a relative path, an absolute path or a fully qualified url.
    2. A bit of HTML markup containing IMG tags that will be rewritten to be properly marked up for the lazy loader
  • strategy: see "Setting up a client", below.
  • aspect: the aspect ratio, such as "16x9".
  • inline: inline a low quality base-64 encoded image instead of the placeholder.
  • inline: inline a low quality base-64 encoded image instead of the placeholder.

The response will be a JSON encoded object, with the following entries:

  • image: the image, as submitted, for error fallback
  • lazyload: the new HTML markup, set up for lazy loading

$params = array (
  'image' => '<img src="https://assets.euractiv.com/lazy-load/examples/05-api/image.jpg">',
  'strategy' => 'crop',
  'aspect' => '16x9',
  'inline' => true,
  'api_key' => '-private-',
);
$endpoint = http:https://assets.euractiv.com/lazy-load/api.php;
$url = $endpoint . '?' . http_build_query($params);
/*
$url = 'https://assets.euractiv.com/lazy-load/api.php?image=%3Cimg%20src%3D%22https%3A%2F%2Fassets.euractiv.com%2Flazy-load%2Fexamples%2F05-api%2Fimage.jpg%22%3E&strategy=crop&aspect=16x9&inline=1&api_key=-private-';
*/
$response = json_decode(file_get_contents($url), true);
var_export($response);
/*
$response = array (
  'lazyload' => '',
);
*/
<pre><code>
$params = array (
  'image' =&gt; '&lt;img src=&quot;https://assets.euractiv.com/lazy-load/examples/05-api/image.jpg&quot;&gt;',
  'strategy' =&gt; 'crop',
  'aspect' =&gt; '16x9',
  'inline' =&gt; true,
  'api_key' =&gt; '-private-',
);
$endpoint = http:https://assets.euractiv.com/lazy-load/api.php;
$url = $endpoint . '?' . http_build_query($params);
/*
$url = 'https://assets.euractiv.com/lazy-load/api.php?image=%3Cimg%20src%3D%22https%3A%2F%2Fassets.euractiv.com%2Flazy-load%2Fexamples%2F05-api%2Fimage.jpg%22%3E&amp;strategy=crop&amp;aspect=16x9&amp;inline=1&amp;api_key=-private-';
*/
$response = json_decode(file_get_contents($url), true);
var_export($response);
/*
$response = array (
  'lazyload' =&gt; '',
);
*/
</code></pre>

Test

This image is a check that the lazy loader works immediately on page load. The test image should be more than 500px from top, but visible in the browser screen on load.


System Status


Cache

The database that powers this API is currently using 42.8 MB.

Expired items were last cleaned from the cache never. The database was last vacuumed never.

To ensure that the database is regularly cleaned, make sure the following line is in your cron tab (adjusting the frequency to your needs):

/15 * * * wget -q -O - https://assets.euractiv.com/lazy-load/clean-cache.php

Driver: fsstore | Clean cache now.

Warning! It looks like the database isn't being cleaned regularly. Are you sure cron is configured?


Configuration

Configuration is located in the file /config/lazy-load.php. If you do not have the ability to modify this file, contact your administrator to have options changed. The configuration file should contain an array with the name $config containing the following offsets:

NameTypeDescriptionCurrent Setting
aspect_ratiosarrayAn array of allowed aspect ratios, format [width]x[height] (for example, 16x9). If the requested aspect ratio is not one of these, the first in the array will be used. Exists to prevent the disk from filling up.
Array (
    [0] => 16x9
    [1] => 4x3
    [2] => 3x2
    [3] => 1x1
)
api_keystringThe key for using the api.Login to view this setting
callmap_driverstringThe callmap driver to use, either "sqlite", "fsstore" or "noop"
noop
callmap_labelsarrayLabels for the callmap, where the key is the regular expression to match and the value is the label to useLogin to view this setting
callmap_visualize_defaultarrayNodes to visualize by defaultLogin to view this setting
callmap_probabilityintegerProbability that a given hit will log. Important for high traffic sites. Set higher for lower probability.
1000
cal_ttlintegerThe time, in seconds, to cache items before revalidating
21600
cal_driverstringThe cache driver to use, either "fs" or "sqlite" or "noop"
fsstore
http_allowed_domainsarrayAllowed domains for fetching assets or generating URLsLogin to view this setting
http_allowed_urlsarraySpecified URLs or regular expressions of specified URLs match for fetching assets or generating URLsLogin to view this setting
http_connect_timeoutintegerThe amount of time, in seconds, that cURL should wait before returning an error status. 15 is a good value for most cases.
15
api_keystringThe key to access protected API calls. This key should only be used in server-to-server communication to avoid exposing it to the broader internet. In requests, the key can be set in the query as the "api_key" value (eg http://example.com?api_key=keyboard_cat), in a POST request body as the "api_key" value, or as a header with the name "X-Vsac-Api-Key".Login to view this setting