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:
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.
<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.
<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.
<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>
<script src='//assets.euractiv.com/lazy-load/lazy-load-min.js'></script>
<script>vsac_lazyload_debug=true<script>
<script src='//assets.euractiv.com/lazy-load/lazy-load.js'></script>
<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"
>
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.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
directionscrop
: resize to the largest fit
on either axis, then crop in the middle to fit
the aspect ratiocrop-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:
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 fallbacklazyload
: 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' => '<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' => '',
);
*/
</code></pre>
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.
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 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 |