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:

Resizes images so that they fit the required area but remain reasonably small as files.
Defers image loading until after the page loads. Uses spaceholders to prevent the page content from jumping around.
Only loads images that are actually visible and poll regularly to load images that have become visible after page load.
Converts JPEGs to progressive JPEGs

Documentation and Examples

Wide Image

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-6621d00a031c7" data-width="1">
    <div class="row text-center">
        <button class="resize-6621d00a031c7 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-6621d00a031c7').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>

Tall Image

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.

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-6621d00a0381d" data-width="1">
    <div class="row text-center">
        <button class="resize-6621d00a0381d 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-6621d00a0381d').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>

Error Image

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-6621d00a03bb0" data-width="1">
    <div class="row text-center">
        <button class="resize-6621d00a03bb0 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-6621d00a03bb0').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>

Setting Up a Client

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>

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>

API

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 62.0 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:

Name	Type	Description	Current Setting
`aspect_ratios`	array	An 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_key`	string	The key for using the api.	Login to view this setting
`callmap_driver`	string	The callmap driver to use, either "sqlite", "fsstore" or "noop"	noop
`callmap_labels`	array	Labels for the callmap, where the key is the regular expression to match and the value is the label to use	Login to view this setting
`callmap_visualize_default`	array	Nodes to visualize by default	Login to view this setting
`callmap_probability`	integer	Probability that a given hit will log. Important for high traffic sites. Set higher for lower probability.	1000
`cal_ttl`	integer	The time, in seconds, to cache items before revalidating	21600
`cal_driver`	string	The cache driver to use, either "fs" or "sqlite" or "noop"	fsstore
`http_allowed_domains`	array	Allowed domains for fetching assets or generating URLs	Login to view this setting
`http_allowed_urls`	array	Specified URLs or regular expressions of specified URLs match for fetching assets or generating URLs	Login to view this setting
`http_connect_timeout`	integer	The amount of time, in seconds, that cURL should wait before returning an error status. 15 is a good value for most cases.	15
`api_key`	string	The 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