docs/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>Demo: Responsive Lazyload</title>
<link rel="stylesheet" href="dist/responsive-lazyload.min.css">
<link rel="stylesheet" href="css/example-only.css">
</head>
<body>
<div class="example">
<h1>Responsive Lazyload Examples</h1>
<nav>
<strong>Examples:</strong>
<a href="./index.html">Basic</a>
| <a href="./loading-animation.html">Loading Animation</a>
| <a href="./noscript-fallback.html">No-JS Fallback</a>
</nav>
<p>
<strong>All photos by <a href="http://www.paintwithstars.com/">paint with stars photography</a>.</strong>
</p>
<h2>Basic usage.</h2>
<div class="js--lazyload">
<img alt="image description"
src="images/example@2x.jpg"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-lazyload="images/example-300x150.jpg 300w,
images/example-600x300.jpg 600w,
images/example.jpg 690w,
images/example@2x.jpg 1380w">
</div>
<p>
The simplest usage is <em>almost</em> plain ol’ markup you’d use anyways.
</p>
<pre><div class="js--lazyload">
<img alt="image description"
src="images/example@2x.jpg"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-lazyload="images/example-300x150.jpg 300w,
images/example-600x300.jpg 600w,
images/example.jpg 690w,
images/example@2x.jpg 1380w">
</div></pre>
<p>
The key differences are:
</p>
<ul>
<li>The <code>img</code> tag is placed inside a wrapper with the <code>js--lazyload</code> classes.</li>
<li>The <code>srcset</code> attribute is set to a blank GIF (base-64 encoded to eliminate an extra request per image).</li>
<li>The images that we want used for <code>srcset</code> are instead placed in the <code>data-lazyload</code> attribute.</li>
</ul>
<p>
To enable lazyloading, include the following snippet just before your closing <code></body></code> tag:
</p>
<pre><script src="path/to/bower_components/responsive-lazyload/dist/responsive-lazyload.min.js"></script>
<script>
responsiveLazyload();
</script></pre>
<h2>Use with <code>figure</code> elements and other wrappers.</h2>
<figure>
<div class="js--lazyload">
<img alt="image description"
src="images/example02@2x.jpg"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-lazyload="images/example02-300x150.jpg 300w,
images/example02-600x300.jpg 600w,
images/example02.jpg 690w,
images/example02@2x.jpg 1380w">
</div>
<figcaption>
You can also include lazyloaded images in <code>figure</code> elements.
</figcaption>
</figure>
<p>
The responsive image markup can be included inside other elements (e.g. <code>figure</code>) without issue. It <em>does</em> require an extra tag, unfortunately.
</p>
<pre><figure>
<div class="js--lazyload">
<img alt="image description"
src="images/example02@2x.jpg"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-lazyload="images/example02-300x150.jpg 300w,
images/example02-600x300.jpg 600w,
images/example02.jpg 690w,
images/example02@2x.jpg 1380w">
</div>
<figcaption>
You can also include lazyloaded images in <code>figure</code> elements.
</figcaption>
</figure></pre>
<h2>How to Handle Different Aspect Ratios</h2>
<div class="js--lazyload"
style="padding-bottom: 66.67%">
<img alt="image description"
src="images/example03@2x.jpg"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-lazyload="images/example03-300w.jpg 300w,
images/example03-600w.jpg 600w,
images/example03.jpg 690w,
images/example03@2x.jpg 1380w">
</div>
<p>
By default, <code>responsiveLazyload.js</code> sets images to a 2:1 aspect ratio (<code>padding-bottom: 50%;</code> — figure this out by dividing the height by the width, e.g. <code>400h ÷ 800w = 0.5</code>).
</p>
<p>
To change the aspect ratio to match your image, divide the height by the width and add an inline style to the wrapper:
</p>
<pre><div class="js--lazyload"
<strong>style="padding-bottom: 66.67%"</strong>>
<img alt="image description"
src="images/example03@2x.jpg"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-lazyload="images/example03-300w.jpg 300w,
images/example03-600w.jpg 600w,
images/example03.jpg 690w,
images/example03@2x.jpg 1380w">
</div></pre>
<h2>Images With Unknown Sizes</h2>
<img alt="image description"
class="js--lazyload"
src="images/example04@2x.jpg"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-lazyload="images/example04-300x150.jpg 300w,
images/example04-600x300.jpg 600w,
images/example04.jpg 690w,
images/example04@2x.jpg 1380w">
<p>
To avoid setting explicit sizes, the lazyload class can be applied directly to the <code>img</code> tag.
</p>
<pre><img alt="image description"
class="js--lazyload"
src="images/example04@2x.jpg"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-lazyload="images/example04-300x150.jpg 300w,
images/example04-600x300.jpg 600w,
images/example04.jpg 690w,
images/example04@2x.jpg 1380w"></pre>
<p>
<em>NOTE:</em> This approach causes the content to reflow (unless the image is square) and may cause layout issues since it tries to set the image at 100% of its container width. Use at your own discretion.
</p>
<h2>Images That Become Visible From JavaScript Actions</h2>
<nav class="tabs js--tabs" role="tablist">
<a href="#one" id="tab-one" role="tab" aria-selected="true" class="tabs__tab">
Panel One
</a>
<a href="#two" id="tab-two" role="tab" aria-selected="false" class="tabs__tab">
Panel Two
</a>
</nav>
<div class="gallery">
<div id="one" class="gallery__panel" aria-hidden="false" aria-labelled-by="tab-one">
<div class="gallery__image js--lazyload">
<img alt="image description"
src="images/example05@2x.jpg"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-lazyload="images/example05-300x150.jpg 300w,
images/example05-600x300.jpg 600w,
images/example05.jpg 690w,
images/example05@2x.jpg 1380w">
</div>
</div>
<div id="two" class="gallery__panel" aria-hidden="true" aria-labelled-by="tab-two">
<div class="gallery__image js--lazyload">
<img alt="image description"
src="images/example06@2x.jpg"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-lazyload="images/example06-300x150.jpg 300w,
images/example06-600x300.jpg 600w,
images/example06.jpg 690w,
images/example06@2x.jpg 1380w">
</div>
</div>
</div>
<p>
In some cases, an image may be within the viewport, but not actually be visible (e.g. tabbed
interfaces). Not to worry — we’ve handled that as well!
</p>
<p>
To make this happen, pass a callback to the JS function that shows or hides elements that is
the return value from <code>responsiveLazyload()</code>:
</p>
<pre><script>
/*
* The initialization returns a function that we can call
* to force a check for new images. This is useful when
* images are shown/hidden by JavaScript.
*/
var loadVisibleImages = responsiveLazyload();
// THIS JS FOR THE DEMO ONLY
window.initTabs({
/*
* Whenever a tab changes, check for new images and
* lazy load them if necessary.
*/
onChange: loadVisibleImages,
});
</script></pre>
<footer>
<p>
Built by
<a href="https://github.com/jlengstorf">Jason Lengstorf</a>
| <a href="https://github.com/jlengstorf/responsive-lazyload.js">View on GitHub</a>
</p>
</footer>
</div>
<!-- GitHub “Fork Me” badge -->
<a href="https://github.com/jlengstorf/responsive-lazyload.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<!-- This example script initializes the tabbed example -->
<script src="js/example-only.js"></script>
<script src="dist/responsive-lazyload.umd.js"></script>
<script>
/*
* The initialization returns a function that we can call to force a check for new images. This
* is useful when images are shown/hidden by JavaScript.
*/
var loadVisibleImages = responsiveLazyload();
// THIS JS FOR THE DEMO ONLY
window.initTabs({
// Whenever a tab changes, check for new images and lazy load them if necessary.
onChange: loadVisibleImages,
});
</script>
</body>
</html>