late-images
Version:
Lightweight javascript library to lazy load images as enter viewport
279 lines (191 loc) • 9.48 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Late images</title>
<meta name="description" content="Lightweight javascript library to lazy load images as they enter viewport">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://rawgit.com/dbrekalo/attire/master/dist/css/build.min.css">
<script src="https://rawgit.com/dbrekalo/attire/master/dist/js/build.min.js"></script>
<script src="dist/lateImages.bundle.js"></script>
</head>
<body>
<section class="attireBlock">
<div class="inner">
<h1 data-nav-title="About" class="attireTitleType1">Late images</h1>
<p class="attireTextType1">
Lightweight javascript browser library to lazy load images as they enter viewport.
Has no big dependencies and weighs less than 2KB.
</p>
<nav class="attireAuthor">
<a class="imageElement" href="https://github.com/dbrekalo">
<img src="https://s.gravatar.com/avatar/32754a476fb3db1c5a1f9ad80c65d89d?s=80" alt="Damir Brekalo">
</a>
<a class="name" href="https://github.com/dbrekalo">Damir Brekalo</a>
<p class="socialBox">
<a href="mailto:dbrekalo@gmail.com" class="iconMail" title="Contact me by email">Contact me by email</a>
<a href="https://github.com/dbrekalo" class="iconGithub" title="Find me on Github">Find me on Github</a>
<a href="https://twitter.com/damirbr" class="iconTwitter" title="Reach me on Twitter">Reach me on Twitter</a>
</p>
</nav>
<p class="attireTextType2">
Average website usually comes with lot of images that are downloaded well before users actually have a chance to see them.
Lazy loading of images can help with your performance budget.
Late images is a small library with simple api. It does not rely on jQuery but comes with convenient adapter.
</p>
</div>
</section>
<section class="attireBlock mod1 testCase">
<div class="inner">
<h2 class="attireTitleType2">Examples and api</h2>
<p class="attireTextType2">
Next few images should fade in as you scroll down:
</p>
<hr class="attireSeparator mod1">
<ul class="imageListType1">
<li><div><img class="lateImage" data-src="demo/images/1small.jpg" alt="example image 1" /></div></li>
<li><div><img class="lateImage" data-src="demo/images/2small.jpg" alt="example image 1" /></div></li>
<li><div><img class="lateImage" data-src="demo/images/3small.jpg" alt="example image 1" /></div></li>
<li><div><img class="lateImage" data-src="demo/images/4small.jpg" alt="example image 1" /></div></li>
<li><div><img class="lateImage" data-src="demo/images/5small.jpg" alt="example image 1" /></div></li>
<li><div><img class="lateImage" data-src="demo/images/6small.jpg" alt="example image 1" /></div></li>
</ul>
<style>
.imageListType1 {
overflow: hidden; margin: 0 -5px; padding: 5px;
border: 1px solid #ededed; background: #fff;
}
.imageListType1 > li {
padding: 5px; float: left; width: 33.333%; box-sizing: border-box;
}
.imageListType1 div {
position: relative; padding-bottom: 65%; overflow: hidden;
}
.imageListType1 .lateImage {
position: absolute; left: 0; width: 100%;
opacity: 0;
transition: opacity 1s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.imageListType1 .lateImageLoaded {
animation: fadeIn 0.5s; opacity: 1;
}
</style>
<hr class="attireSeparator mod1">
<p class="attireTextType2">
Late images come with jQuery adapter included - to lazy load this images we had to write was following code.
</p>
<pre class="attireCodeHighlight"><code class="language-javascript">
$('.lateImage').lateImages();
</code></pre>
<p class="attireTextType2">
Html was structured like so:
</p>
<pre class="attireCodeHighlight"><code class="language-markup">
<script type="prism-html-markup"><img class="lateImage" data-src="demo/images/1small.jpg" alt="example image 1" />
<img class="lateImage" data-src="demo/images/2small.jpg" alt="example image 2" />
</script>
</code></pre>
<p class="attireTextType2">
Image fade in was achieved via simple css animation that was trigged when new class was applied to element.
</p>
<script>
$(document).ready(function() {
$('.lateImage').lateImages();
// var elements = Array.prototype.slice.call(
// document.getElementsByClassName('lateImage')
// );
// elements.forEach(function(element) {
// new LateImage(element);
// });
});
</script>
<hr class="attireSeparator mod1">
<p class="attireTextType2">
Same result in plain javascript (without jQuery) is achieved like so:
</p>
<pre class="attireCodeHighlight"><code class="language-javascript">
var elements = Array.prototype.slice.call(
document.getElementsByClassName('lateImage')
);
elements.forEach(function(element) {
new LateImage(element);
});
</code></pre>
<hr class="attireSeparator mod1">
<p class="attireTextType2">
Library options are passed via second parameter to constructor.
If we want to start loading images 100 pixels before user scroll position we setup call like so:
</p>
<pre class="attireCodeHighlight"><code class="language-javascript">
// when used via jQuery plugin facade
$('.lateImage').lateImages({threshold: 100});
// plain js
new LateImage(element, {threshold: 100});
</code></pre>
<hr class="attireSeparator mod1">
<p class="attireTextType2">
Image lazy load can be stopped at any time by obtaining late image instance and calling destroy method on it.
</p>
<pre class="attireCodeHighlight"><code class="language-javascript">
// get instance via jQuery
var lateImage = $('.lateImage').lateImages().data('lateImage');
// or
var lateImage = new LateImage(element);
// sometime later
lateImage.destroy();
</code></pre>
<hr class="attireSeparator mod1">
<p class="attireTextType2">
Every late image instance will work with following defaults merged with options you passed to constructor.
</p>
<pre class="attireCodeHighlight"><code class="language-javascript">
LateImage.defaults = {
srcAttribute: 'data-src',
altAttribute: 'data-alt',
doneCallback: null,
failCallback: null,
threshold: 0,
loadingClass: 'lateImageLoading',
loadedClass: 'lateImageLoaded',
errorClass: 'lateImageError',
enableViewportCheck: true
};
</code></pre>
</div>
</section>
<section class="attireBlock">
<div class="inner">
<h2 class="attireTitleType2">Installation</h2>
<p class="attireTextType2">
Late images is packaged as UMD library so you can use it in CommonJS and AMD environment or with browser globals.
</p>
<pre class="attireCodeHighlight"><code class="language-javascript">
// install via npm
npm install late-images --save
// if you use bundler
var LateImage = require('late-images');
// or just using browser globals
var LateImage = window.LateImage;
</code></pre>
<p class="attireTextType2">
For browser usage browse dist folder - if working with build tools go with src folder.
Download library files from <a href="https://github.com/dbrekalo/lateImages">github repo</a>,
get them via bower (bower install lateImages)
or via npm (npm install late-images)
</p>
</div>
</section>
<a class="githubRibbon" href="https://github.com/dbrekalo/lateImages">
<img 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>
<footer class="attireFooter">
<p>This page is built with <a href="http://dbrekalo.github.io/attire/">Attire</a>.</p>
</footer>
</body>
</html>