davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Lazy Loading Images on the Web (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="http://developer.telerik.com/featured/lazy-loading-images-on-the-web/">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Lazy Loading Images on the Web (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="http://developer.telerik.com/featured/lazy-loading-images-on-the-web/">Source originale du contenu</a></h3>
    <p>Images on the web offer a bit of a conundrum. They are often what makes a web page feel vibrant and interesting, but they can also dramatically hurt web page performance by adding a significant amount of weight to a page.</p>

<p>On this site, we use a lot of images within our content. As the person who maintains this site, I do my best to optimize them, but in many cases the sum total of the image weight on a page is still significant (especially as we’ve come to rely on animated GIFs for illustrations). The thing is, much of this image weight sits well offscreen. As much as I’d like to believe that every visitor reads every word we write, it’s highly likely that many visitors are downloading images that they simply do not ever see.</p>

<h2>The Page Weight Problem</h2>

<p>This issue isn’t unique to this site. <a href="http://mobile.httparchive.org/interesting.php?a=All&amp;l=Jul%201%202015">According to HTTPArchive</a>, images now account for 63% of page weight. As developers, we work hard to optimize and minify our JavaScript code and CSS to make them as small as possible, but, by sheer volume, that can never have the impact of simply reducing image weight.</p>

<p>Consider that, as <a href="http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/">Tammy Everts notes</a>, “images alone comprise more page weight (1310 KB) than an entire page in May 2012 (1059 KB), just three years ago.” It’s a problem for any visitor with a data cap – which is pretty much everyone, especially internationally. Images your visitors never see are costing them money.</p>

<p>And the page weight issue is only getting worse:</p>

<blockquote><p>As of May [2015], the average web page surpassed the 2 MB mark. This is almost twice the size of the average page just three years ago. – <a href="http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/">source</a></p>
</blockquote>

<p>So, what can we do?</p>

<p>Well, one option is to “lazy load” images. In essence, we use a little bit of JavaScript to determine which images are in (or near) the viewport and only download images that the user will likely see. It is a strategy that is not without its own flaws (some of which are covered in this <a href="http://www.smashingmagazine.com/2015/02/redefining-lazy-loading-with-lazy-load-xt/">article</a> by the author of one lazy loading library). However, if your site relies on image-heavy content, it is a strategy worth considering – especially when targeting mobile devices.</p>

<p>In the remainder of this article, we’ll look at a number of different solutions for implementing lazy loading of images.</p>

<h3>Sample Page</h3>

<p>To assist us in reviewing the options for lazy loading images, I’ve built a simple example web page. The page is designed as a “Teen Titans Go” fan page that lists out a large number of the characters, with their images.</p>

<p><a href="http://developer.telerik.com/wp-content/uploads/2015/10/samplepage.jpg"><img src="http://developer.telerik.com/wp-content/uploads/2015/10/samplepage.jpg" alt="Teen Titans" width="800" height="523" class="alignnone size-full wp-image-60881"/></a></p>

<p>I rebuilt the page using a variety of solutions to compare how they are implemented and how they work. The full code for all the variations can be found <a href="https://github.com/remotesynth/Lazy-Loading-Images">on GitHub</a>.</p>

<h2>Custom Solution</h2>

<p>At its most basic implementation, building a custom solution for lazy loading images is not complicated. Here’s what we need to do:</p>

<ol>
<li>Build the HTML so that images are not automatically loaded (this is typically done by specifying the actual <code>src</code> in a <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">data attribute</a>);</li>
<li>Watch changes to the viewport or scrolling to see which images have or may soon enter the viewport;</li>
<li>Swap the data attribute and the <code>src</code> so that the image is loaded.</li>
</ol>

<p>For the first item, you might be concerned that an <code>img</code> tag without a <code>src</code> is not valid HTML. Unfortunately, it appears that you cannot place the actual source in the <code>src</code> attribute while somehow preventing the browser from loading the image using JavaScript. You can place a “dummy” source image, however, such as a spacing or loading gif.</p>

<p>Let’s start by seeing how to build this in plain JavaScript.</p>

<h3>Plain JavaScript</h3>

<p><a href="https://rawgit.com/remotesynth/Lazy-Loading-Images/master/custom.html">View this demo</a></p>

<p>The first thing is to make sure the images do not load by specifying the image source using a <code>data-src</code> attribute rather than placing it in the <code>src</code>. In our simple example, we are not going to worry about setting a dummy <code>src</code> or loading image.</p>

<pre><code class="language-markup">&lt;img data-src="images/Robin.jpg" alt="" /&gt;</code></pre>

<p>I should note that you may want to add a width and height to your images to ensure that they take up the appropriate space. For our sample that isn’t completely necessary.</p>

<p>Now we need a way to test if an image is within the viewport. Thankfully, with support for <code>getBoundingClientRect</code> being <a href="http://caniuse.com/#feat=getboundingclientrect">nearly universal</a>, there is a reliable method to do that. The function we are using is borrowed from a <a href="http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433">response on StackOverflow</a>.</p>

<pre><code class="language-javascript">function isElementInViewport (el) {&#13;
&#13;
    var rect = el.getBoundingClientRect();&#13;
&#13;
    return (&#13;
        rect.top &gt;= 0 &amp;&amp;&#13;
        rect.left &gt;= 0 &amp;&amp;&#13;
        rect.bottom &lt;= (window.innerHeight || document.documentElement.clientHeight) &amp;&amp; /*or $(window).height() */&#13;
        rect.right &lt;= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */&#13;
    );&#13;
}</code></pre>

<p>To use this function, we’d pass an image or an image container and the function will return true if the passed element is within the viewport, or false if it is not.</p>

<p>Next, we need to get all of the images we want to lazy load and then test them against this function every time a scroll or change to the viewport occurs. Let’s look at the full code and then examine what it is doing.</p>

<pre><code class="language-javascript">//these handlers will be removed once the images have loaded&#13;
window.addEventListener("DOMContentLoaded", lazyLoadImages);&#13;
window.addEventListener("load", lazyLoadImages);&#13;
window.addEventListener("resize", lazyLoadImages);&#13;
window.addEventListener("scroll", lazyLoadImages);&#13;
&#13;
function lazyLoadImages() {&#13;
  var images = document.querySelectorAll("#main-wrapper img[data-src]"),&#13;
      item;&#13;
  // load images that have entered the viewport&#13;
  [].forEach.call(images, function (item) {&#13;
    if (isElementInViewport(item)) {&#13;
      item.setAttribute("src",item.getAttribute("data-src"));&#13;
      item.removeAttribute("data-src")&#13;
    }&#13;
  })&#13;
  // if all the images are loaded, stop calling the handler&#13;
  if (images.length == 0) {&#13;
    window.removeEventListener("DOMContentLoaded", lazyLoadImages);&#13;
    window.removeEventListener("load", lazyLoadImages);&#13;
    window.removeEventListener("resize", lazyLoadImages);&#13;
    window.removeEventListener("scroll", lazyLoadImages);&#13;
  }&#13;
}</code></pre>

<p>The first thing we do is ensure that we are watching for scrolls and changes to the viewport by listening on the <code>DOMContentLoaded</code>, <code>load</code>, <code>resize</code> and <code>scroll</code> events. Every time one of these events occurs, we call a method to check if any images have entered the viewport. (If you’re concerned about how often these events will be called, I discuss that issue in a later section.)</p>

<p>Looking at the <code>lazyLoadImages</code> method, we first get all the images that have not yet loaded. We do this by selecting only those that still have a <code>data-src</code> attribute. (As we’ll see in upcoming examples, there are a number of methods to do this, but, honestly, I have not tested which method is more performant. However, the performance implication of DOM node retrieval is negligible for the overwhelming majority of cases)</p>

<p>If the image has entered the viewport, we swap the value of the <code>data-src</code> attribute with the <code>src</code> attribute and remove the <code>data-src</code> attribute. Finally, if there are no images left unloaded, we simply remove the event listeners.</p>

<p>All in all, I’d say this was pretty simple, though it’s a very limited implementation. You could expand upon this to test for images sitting just outside the viewport so that there would be a potentially smaller visibility delay for the user – although this only really helps if the user manually scrolls.</p>

<h3>jQuery</h3>

<p><a href="https://rawgit.com/remotesynth/Lazy-Loading-Images/master/custom-jquery.html">View this demo</a></p>

<p>If you use jQuery on your site, you can save a few lines of code. For instance, we can move turning the event handlers on and off into a single line of code. However, all in all, we save only a handful lines of code.</p>

<pre><code class="language-javascript">$(window).on('DOMContentLoaded load resize scroll', function () {;&#13;
  var images = $("#main-wrapper img[data-src]");&#13;
  // load images that have entered the viewport&#13;
  $(images).each(function (index) {&#13;
    if (isElementInViewport(this)) {&#13;
      $(this).attr("src",$(this).attr("data-src"));&#13;
            $(this).removeAttr("data-src");&#13;
    }&#13;
  })&#13;
  // if all the images are loaded, stop calling the handler&#13;
  if (images.length == 0) {&#13;
    $(window).off('DOMContentLoaded load resize scroll')&#13;
  }&#13;
})&#13;
&#13;
// source: http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433&#13;
function isElementInViewport (el) {&#13;
    var rect = el.getBoundingClientRect();&#13;
&#13;
    return (&#13;
        rect.top &gt;= 0 &amp;&amp;&#13;
        rect.left &gt;= 0 &amp;&amp;&#13;
        rect.bottom &lt;= $(window).height() &amp;&amp;&#13;
        rect.right &lt;= $(window).width()&#13;
    );&#13;
}</code></pre>

<p>If you go the build your own solution route, choosing straight JavaScript versus jQuery ends up being just a matter of personal preference.</p>

<h3>Problems with These Solutions</h3>

<p>Right now, we’ve just implemented extremely basic lazy loading functionality for images. A more robust solution would handle setting an offset, whereby elements just off screen are loaded as well as those on screen. Also, while the performance of our script may be suitable for a page with a relatively limited number of images (and, in this case, the images are not huge), its performance would likely degrade significantly for a more complex page with more images as the event handler is constantly being called and looping through a list of images.</p>

<p>Some additional features might be nice too, for instance having success and failure handlers for the loading process could prove useful. It’d also be nice to implement things like <code>srcset</code> and <code>picture</code> for responsive images. Lastly, I might want to add support for a  loading images in case the image file isn’t fully downloaded when it enters the viewport. I might even, perhaps, want some sort of animation or transition when images appear.</p>

<p>The good news is that there are a lot of pre-built libraries for handling lazy loading of images available that do many of these things. Let’s look at some of them.</p>

<h2>Libraries</h2>

<p>For the most part, as you look through the library variations below, you may notice that they all function very similarly. For our sample, the implementation looks surprisingly similar across the board. Choosing one comes down to whether you want to require jQuery (most do) and what kind of options you need, as some offer far more configuration than others.</p>

<h3>LazyLoad</h3>

<p><a href="https://rawgit.com/remotesynth/Lazy-Loading-Images/master/lazyload.html">View this demo</a></p>

<p>One of the first lazy loading image libraries was the <a href="http://www.appelsiini.net/projects/lazyload">Lazy Load Plugin for jQuery</a>. It inspired a number of additional libraries including <a href="http://verlok.github.io/lazyload/">LazyLoad</a>.</p>

<p>One difference between LazyLoad and the other solutions is that the images use <code>data-original</code> for the source rather than <code>data-src</code>.</p>

<pre><code class="language-markup">&lt;img data-original="images/GreenLantern.jpg" alt="" width="374" height="260" /&gt;</code></pre>

<p>Once our images are set up, lazy loading them is incredibly simple. Just include the JavaScript file (obviously) and initialize LazyLoad. In our sample code below, we’ve added a threshold of 50 pixels, meaning that items just off-screen will also be loaded. We’ve also added a success handler.</p>

<pre><code class="language-javascript">var myLazyLoad = new LazyLoad({&#13;
  threshold: 50,&#13;
  callback_load: function(e) {&#13;
    console.log($(e).attr("data-original") + " loaded" );&#13;
  }&#13;
});</code></pre>

<p>The image below shows scrolling through the mobile version of the page loading one image at a time. In the console, each image indicates that it has successfully loaded.</p>

<p><a href="http://developer.telerik.com/wp-content/uploads/2015/10/LazyLoad_opt.gif"><img src="http://developer.telerik.com/wp-content/uploads/2015/10/LazyLoad_opt.gif" alt="LazyLoad_opt" width="400" height="533" class="alignnone size-full wp-image-60891"/></a></p>

<p>LazyLoad supports a number of <a href="http://verlok.github.io/lazyload/#options">additional options</a>, which we won’t cover here.</p>

<h3>bLazy.js</h3>

<p><a href="https://rawgit.com/remotesynth/Lazy-Loading-Images/master/blazy.html">View this demo</a></p>

<p><a href="http://dinbror.dk/blazy/">bLazy</a> (or [Be]Lazy) is a relatively recent library that aims to offer a number of key features while remaining small and lightweight. One significant difference of bLazy is that it does not require jQuery.</p>

<p>To identify which images are to be lazy loaded, by default bLazy requires you to add a CSS class onto each. In this example, I am using the default CSS class, but the <a href="http://dinbror.dk/blog/blazy/#Offset">selector can be customized</a>.</p>

<pre><code class="language-markup">&lt;img data-src="images/Batgirl.jpg" alt="" width="374" height="260" class="b-lazy" /&gt;</code></pre>

<p>After that, you simply include and initialize the script. Below I have done that while also setting an offset and a success and error handler.</p>

<pre><code class="language-javascript">var bLazy = new Blazy({&#13;
    offset: 50,&#13;
    success: function(e){&#13;
        console.log($(e).attr("src") + " loaded" );&#13;
  },&#13;
    error: function(ele, msg){&#13;
        console.log(msg)&#13;
  }&#13;
});</code></pre>

<p>Below you can see multiple images loading at a time as the page is scrolled.</p>

<p><a href="http://developer.telerik.com/wp-content/uploads/2015/10/blazy_opt.gif"><img src="http://developer.telerik.com/wp-content/uploads/2015/10/blazy_opt.gif" alt="blazy_opt" width="600" height="401" class="alignnone size-full wp-image-60901"/></a></p>

<p>bLazy supports a number of <a href="http://dinbror.dk/blog/blazy/#Options">options</a> including the ability to serve smaller or larger images based upon screen size. Check the <a href="http://dinbror.dk/blog/blazy/">documentation</a> for more details.</p>

<h3>Unveil</h3>

<p><a href="https://rawgit.com/remotesynth/Lazy-Loading-Images/master/unveil.html">View this demo</a></p>

<p><a href="http://luis-almeida.github.io/unveil/">Unveil</a> is another script inspired by <a href="http://www.appelsiini.net/projects/lazyload">jQuery_lazyload</a>, so, it does require jQuery. It is very lightweight, however, being less than 1k.</p>

<p>One nice thing about Unveil is that it does not require any special markup on your images beyond the <code>data-src</code> attribute.</p>

<pre><code class="language-markup">&lt;img data-src="images/WonderTwins.jpg" alt="" /&gt;</code></pre>

<p>This is because we specify the images that will be supplied to Unveil via a jQuery selector. Simply load the script and apply Unveil to our selected images on document ready.</p>

<pre><code class="language-javascript">$(function () {&#13;
  $("#main-wrapper img").unveil(50, function() {&#13;
    $(this).load(function() {&#13;
      console.log(this.src + " loaded");&#13;
    });&#13;
  });&#13;
})</code></pre>

<p>As with the prior examples, we’ve also initialized Unveil with an offset of 50 pixels and a success handler.</p>

<p>Unveil is more lightweight than the other libraries and, because of this, doesn’t offer quite as many options as the others discussed. Check <a href="http://luis-almeida.github.io/unveil/">the documentation</a> for additional usage options.</p>

<h3>Lazy Load XT</h3>

<p><a href="https://rawgit.com/remotesynth/Lazy-Loading-Images/master/lazyloadxt.html">View this demo</a></p>

<p><a href="https://github.com/ressio/lazy-load-xt">Lazy Load XT</a> probably offers the most features of any of the libraries discussed here. In their <a href="http://www.smashingmagazine.com/2015/02/redefining-lazy-loading-with-lazy-load-xt/">Smashing Magazine article</a>, the authors described their aim to fix many of the deficiencies in the other available libraries.</p>

<p>Lazy Load XT splits itself into two main libraries – the first has the core features and the second adds some of the more advanced options. It also offers additional scripts as plugins and CSS files for effects. For our sample, we only need the basic script file.</p>

<pre><code class="language-markup">&lt;script src="js/jquery.lazyloadxt.js"&gt;&lt;/script&gt;</code></pre>

<p>Just as with Unveil previously, our images only need a <code>data-src</code> attribute. There is no need for any special classes or additional data attributes.</p>

<pre><code class="language-markup">&lt;img data-src="images/BeastBoy.jpg" alt="" /&gt;</code></pre>

<p>Now, all we need to do is initialize Lazy Load XT. In the below code, we are also adding success and error handlers by listening for specific events that LazyLoad emits.</p>

<pre><code class="language-javascript">$(window).lazyLoadXT();&#13;
$(window).on("lazyload", function(e){&#13;
    console.log(e.target.src + " loaded");&#13;
});&#13;
$(window).on("lazyerror", function(e){&#13;
    console.log("Error loading " + e.target.src);&#13;
});</code></pre>

<p>Lazy Load XT supports a lot of <a href="https://github.com/ressio/lazy-load-xt#options">options</a> and <a href="https://github.com/ressio/lazy-load-xt#events">events</a>. I should note, however, that I had some difficulty getting certain options to work easily. While Lazy Load XT has a lot of examples and documentation, it seems (to me anyway) to be missing the simple examples, such as using some of the basic events and configuration options. I also, unfortunately, had some difficulty even getting the basic effects to work (in theory, this was simply a matter of including the correct CSS).</p>

<p>On a more positive note, Lazy Load XT has extensive support for responsive images. It even offers support for lazy loading videos and iframes, making it by far the most comprehensive lazy loading library I came across. Someone has even created a <a href="https://wordpress.org/plugins/lazy-load-xt/">WordPress plugin</a> to lazy load images included within WordPress posts.</p>

<h2>Telerik Platform – Responsive Images Service</h2>

<p><a href="https://rawgit.com/remotesynth/Lazy-Loading-Images/master/telerik.html">View this demo</a></p>

<p>Let’s look at one more example. Within the <a href="http://www.telerik.com/platform">Telerik Platform</a>‘s Backend Services offering is a <a href="http://docs.telerik.com/platform/backend-services/javascript/responsive-images/introduction">responsive images service</a>. It offers:</p>

<ul>
<li>The ability to specify image dimensions for individual images;</li>
<li>Automatic resizing of images based on the target container dimensions.</li>
</ul>

<p>The main benefit for our purposes is that using this service the images are automatically responsive. For example, we can place a huge image in Backend Services but the service will automatically serve the appropriate image based on the device’s screen size and pixel density — no need to use srcset/picture, or to upload ten versions of the images.</p>

<p>For a full overview of the responsive images offering, check out <a href="http://developer.telerik.com/featured/responsive-images-theres-service/">this article by Hristo Borisov</a>.</p>

<p>In addition, Backend Services offer the ability to store and serve files from the CDN. While this isn’t necessary to utilize the responsive images features, it is definitely a plus.</p>

<p><a href="http://developer.telerik.com/wp-content/uploads/2015/10/Platform_files.jpg"><img src="http://developer.telerik.com/wp-content/uploads/2015/10/Platform_files.jpg" alt="Platform_files" width="800" height="467" class="alignnone size-full wp-image-60911"/></a></p>

<p>After uploading the files, we need to right click the file name (i.e. the Batgirl.jpg link in the screenshot above) to get its URL (see <a href="http://docs.telerik.com/platform/backend-services/javascript/files/files-getting-started#obtain-the-file-download-url">the documentation</a> if you need additional details).</p>

<p>In the HTML, we need to swap all the images for the CDN-hosted versions within the <code>data-src</code> attribute. We also need to add a <code>data-responsive</code> attribute to each image. This enables the automatic image replacement – more on that in a moment. For instance, here’s the image tag for Raven (aka my favorite Teen Titan), where the URL follows an <code>/api-key/image-id</code> format.</p>

<pre><code class="language-markup">&lt;img data-src="https://bs2.cdn.telerik.com/v1/h5tc7Cws1Qi9oluI/de916422-6e1f-11e5-a7c8-356526b6da24" alt="" data-responsive /&gt;</code></pre>

<p>We are going to use the JavaScript SDK that Backend Services provides to <a href="http://docs.telerik.com/platform/backend-services/javascript/responsive-images/responsive-images-automatic-use">automatically apply responsive images</a>. So first, let’s include the script.</p>

<pre><code class="language-markup">&lt;script src="https://bs-static.cdn.telerik.com/1.5.6/everlive.all.min.js"&gt;&lt;/script&gt;</code></pre>

<p>Next we need to initialize the service. There are a number of <a href="http://docs.telerik.com/platform/backend-services/javascript/responsive-images/responsive-images-configure-attributes#configuring-html-attributes">additional options</a> that you can specify here, but let’s stick with the defaults.</p>

<pre><code class="language-javascript">var el = new Everlive({&#13;
    apiKey: "your-api-key",&#13;
    scheme: "https"&#13;
});</code></pre>

<p>Since the service is not dependent on jQuery, let’s go ahead and leverage the plain JavaScript version we built earlier. We also need to include the <code>isElementInViewport</code> function shown earlier. After that, it’s just some minor changes to the plain JavaScript code we wrote previously.</p>

<pre><code class="language-javascript">window.addEventListener("DOMContentLoaded", lazyLoadImages);&#13;
window.addEventListener("load", lazyLoadImages);&#13;
window.addEventListener("resize", lazyLoadImages);&#13;
window.addEventListener("scroll", lazyLoadImages);&#13;
&#13;
function lazyLoadImages() {&#13;
  // select only images that do not yet have a src attribute added&#13;
  var images = document.querySelectorAll("#main-wrapper img:not([src])"),&#13;
      item;&#13;
&#13;
  // load images that have entered the viewport&#13;
  [].forEach.call(images, function (item) {&#13;
    if (isElementInViewport(item)) {&#13;
            el.helpers.html.process(item, {}, successHandler, errorHandler);&#13;
    }&#13;
  })&#13;
  // if all the images are loaded, stop calling the handler&#13;
  if (images.length == 0) {&#13;
    window.removeEventListener("DOMContentLoaded", lazyLoadImages);&#13;
    window.removeEventListener("load", lazyLoadImages);&#13;
    window.removeEventListener("resize", lazyLoadImages);&#13;
    window.removeEventListener("scroll", lazyLoadImages);&#13;
  }&#13;
}&#13;
&#13;
function successHandler (e) {&#13;
    console.log("success");&#13;
}&#13;
function errorHandler (e) {&#13;
    console.log(e);&#13;
}</code></pre>

<p>There are a couple of small but important changes to note here. First, we have changed our selector to select any images that do not have a <code>src</code> attribute. The automatic responsive image loading does not like us removing the <code>data-src</code> attribute, but, using this method, we can still select only those images that have not yet been loaded.</p>

<p>Second, if the image is within the viewport, we call <code>el.helpers.html.process()</code> to have the service automatically process them. We’re not passing any options at this time, although we did set success and failure handlers. Since we are loading from an external CDN, it would probably be worth expanding this to support an offset in the future.</p>

<p>There’s many more options available in the responsive images service. If you’re interested in utilizing it, I suggest <a href="http://docs.telerik.com/platform/backend-services/javascript/responsive-images/introduction">reading through the documentation</a> to learn more about what is available.</p>

<h2>Go Further</h2>

<p>Hopefully, by now, you have a good overview of the benefits of lazy loading images and some of the techniques available to you for achieving it. Our samples were intentionally simple, but the options exist to take this to the next level including handling things like responsive images, video, iframes and widgets, depending on the needs of your site.</p>

<p>The important thing to keep in mind here is the cost/benefit to your users. Does the potential for a slight delay in image loading (and, perhaps, a decrease in “scan-ability” of the content) offset the problem of image bloat? Or does your content rely heavily on large imagery that the user may never see, but which may be costing them in terms of loading time or data overages? Is it possibly worth implementing this strategy but targeting specifically mobile, where data can be slow and costly, while ignoring desktops, where WiFi would pretty much be guaranteed?</p>

<p>Share your thoughts in the comments.</p>

<p><em>Header image courtesy of <a href="https://flic.kr/p/7vuxbx">Andy Rennie</a></em></p>

<p><a data-banner_id="21" data-campaign_id="11" href="http://www.telerik.com/platform" target="_blank" class="acc_banner_link "><img src="http://developer.telerik.com/wp-content/uploads/ac_uploads/1177154.jpg" width="570" height="100"/></a></p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="http://developer.telerik.com/featured/lazy-loading-images-on-the-web/">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
      Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
    </p>
    <p>
      Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>