docs/noscript-fallback.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">
<style>
/*
* Since an image that’s not in the wrapper won't load properly, we have to
* hide it manually if JS is disabled but leave the fallback image visible.
*/
.no-js img.js--lazyload:not(.js--lazyload--fallback) {
display: none;
}
</style>
</head>
<body class="no-js">
<div class="example">
<h1>Responsive Lazyload Examples: Degrade Gracefully If JavaScript Is Disabled</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>
<p>
</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">
<noscript>
<img alt="image description"
src="images/example@2x.jpg"
srcset="images/example-300x150.jpg 300w,
images/example-600x300.jpg 600w,
images/example.jpg 690w,
images/example@2x.jpg 1380w">
</noscript>
</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">
<noscript>
<img alt="image description"
src="images/example@2x.jpg"
srcset="images/example-300x150.jpg 300w,
images/example-600x300.jpg 600w,
images/example.jpg 690w,
images/example@2x.jpg 1380w">
</noscript>
</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">
<noscript>
<img alt="image description"
src="images/example02@2x.jpg"
srcset="images/example02-300x150.jpg 300w,
images/example02-600x300.jpg 600w,
images/example02.jpg 690w,
images/example02@2x.jpg 1380w">
</noscript>
</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">
<noscript>
<img alt="image description"
src="images/example02@2x.jpg"
srcset="images/example02-300x150.jpg 300w,
images/example02-600x300.jpg 600w,
images/example02.jpg 690w,
images/example02@2x.jpg 1380w">
</noscript>
</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">
<noscript>
<img alt="image description"
src="images/example03@2x.jpg"
srcset="images/example03-300w.jpg 300w,
images/example03-600w.jpg 600w,
images/example03.jpg 690w,
images/example03@2x.jpg 1380w">
</noscript>
</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"
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">
<noscript>
<img alt="image description"
src="images/example03@2x.jpg"
srcset="images/example03-300w.jpg 300w,
images/example03-600w.jpg 600w,
images/example03.jpg 690w,
images/example03@2x.jpg 1380w">
</noscript>
</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">
<noscript>
<img alt="image description"
class="js--lazyload js--lazyload--fallback"
src="images/example04@2x.jpg"
srcset="images/example04-300x150.jpg 300w,
images/example04-600x300.jpg 600w,
images/example04.jpg 690w,
images/example04@2x.jpg 1380w">
</noscript>
<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">
<noscript>
<img alt="image description"
class="js--lazyload js--lazyload--fallback"
src="images/example04@2x.jpg"
srcset="images/example04-300x150.jpg 300w,
images/example04-600x300.jpg 600w,
images/example04.jpg 690w,
images/example04@2x.jpg 1380w">
</noscript></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>
<p>
<em>ALSO NOTE:</em> Since an image that’s not in the wrapper won't load properly, we have to hide it manually if JS is disabled but leave the fallback image visible:
</p>
<pre>.no-js img.js--lazyload:not(.js--lazyload--fallback) {
display: none;
}</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>
<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>
<script src="dist/responsive-lazyload.umd.js"></script>
<script>
responsiveLazyload();
// Remove the `no-js` class to signify that JS is enabled.
document.querySelector('body').classList.remove('no-js');
</script>
</body>
</html>