Skip to content

Instantly share code, notes, and snippets.

@tzi

tzi/index.html

Last active August 29, 2015 14:18
Show Gist options
  • Save tzi/fd4d1527aa44730016f8 to your computer and use it in GitHub Desktop.
Save tzi/fd4d1527aa44730016f8 to your computer and use it in GitHub Desktop.
Download ZIP
Lazyload example
Raw
index.html
<!doctype html>
<title>lazyloading images</title>
<link rel="stylesheet" href="styles.css" />
<script src="lazyload.min.js"></script>
<div class="popin">
<h1>simple images example</h1>
<h2>scroll for more</h2>
<div class="pad">
<img
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="https://avatars0.githubusercontent.com/u/123822?v=3&s=460" />
<img
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="https://avatars0.githubusercontent.com/u/123822?v=3&s=460" />
<img
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="https://avatars0.githubusercontent.com/u/123822?v=3&s=460" />
<img
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="https://avatars0.githubusercontent.com/u/123822?v=3&s=460" />
</div>
<script>
var lazy = lazyload({
container: document.querySelector('.popin')
});
var lazyImageList = document.querySelectorAll('img[data-src]');
for (var i=0; i< lazyImageList.length; i++) {
lazy(lazyImageList[i]);
}
</script>
Raw
lazyload.min.js
(function(u){var f;"undefined"!==typeof window?f=window:"undefined"!==typeof self&&(f=self);f.lazyload=u()})(function(){return function f(g,e,c){function n(k,h){if(!e[k]){if(!g[k]){var d="function"==typeof require&&require;if(!h&&d)return d(k,!0);if(m)return m(k,!0);d=Error("Cannot find module '"+k+"'");throw d.code="MODULE_NOT_FOUND",d;}d=e[k]={exports:{}};g[k][0].call(d.exports,function(c){var a=g[k][1][c];return n(a?a:c)},d,d.exports,f,g,e,c)}return e[k].exports}for(var m="function"==typeof require&&
require,h=0;h<c.length;h++)n(c[h]);return n}({1:[function(f,g,e){(function(c){function n(a){-1===e.call(q,a)&&q.push(a)}function m(a){function b(b){var c;c="function"===typeof a.src?a.src(b):b.getAttribute(a.src);c&&(b.src=c);b["data-lzled"]=!0;t[e.call(t,b)]=null}a=k({offset:333,src:"data-src",container:!1},a||{});"string"===typeof a.src&&n(a.src);var t=[];return function(c){c.onload=null;c.removeAttribute("onload");c.onerror=null;c.removeAttribute("onerror");-1===e.call(t,c)&&d(c,a,b)}}function h(a){a=
"HTML"+a+"Element";if(!1!==a in c){var b=c[a].prototype.getAttribute;c[a].prototype.getAttribute=function(a){if("src"===a){for(var c,l=0,d=q.length;l<d&&!(c=b.call(this,q[l]));l++);return c||b.call(this,a)}return b.call(this,a)}}}function k(a,b){for(var c in a)void 0===b[c]&&(b[c]=a[c]);return b}function e(a){for(var b=this.length;b--&&this[b]!==a;);return b}g.exports=m;var d=f("in-viewport"),q=["data-src"];c.lzld=m();h("Image");h("IFrame")}).call(this,"undefined"!==typeof global?global:"undefined"!==
typeof self?self:"undefined"!==typeof window?window:{})},{"in-viewport":2}],2:[function(f,g,e){(function(c){function e(a,b,c){a.attachEvent?a.attachEvent("on"+b,c):a.addEventListener(b,c,!1)}function f(a,b,c){var d;return function(){var l=this,k=arguments,e=c&&!d;clearTimeout(d);d=setTimeout(function(){d=null;c||a.apply(l,k)},b);e&&a.apply(l,k)}}function h(a){function b(b,e,h){if(!q(c.document.documentElement,b)||!q(c.document.documentElement,a))return h?setTimeout(d(b,e,h),0):!1;var g=b.getBoundingClientRect(),
f=a.getBoundingClientRect(),r=g.left,n=g.top,m=e,p=e;a===c.document.body?(m+=c.document.documentElement.clientWidth,p+=c.document.documentElement.clientHeight,f={bottom:a.scrollHeight,top:0,left:0,right:a.scrollWidth}):(r-=f.left,n-=f.top,m+=a.clientWidth,p+=a.clientHeight);if(!(g.right<f.left||g.left>f.right||g.bottom<f.top||g.top>f.bottom)&&n<=p&&r<=m)if(h)l.splice(k.call(l,b),1),h(b);else return!0;else if(h)setTimeout(d(b,e,h),0);else return!1}function d(a,c,e){-1===k.call(l,a)&&l.push(a);return function(){h.push(function(){b(a,
c,e)})}}var h=[],l=[],g=a===c.document.body?c:a,p=f(function(){for(var a;a=h.shift();)a()},15);e(g,"scroll",p);g===c&&e(c,"resize",p);"function"===typeof c.MutationObserver&&v(l,a,p);return{container:a,isInViewport:b}}function k(a){for(var b=this.length;b--&&this[b]!==a;);return b}function v(a,b,c){function d(b){return-1!==k.call(a,b)}function e(a){return 0<f.call(a.addedNodes,d).length}var h=new MutationObserver(function(a){!0===a.some(e)&&setTimeout(c,0)}),f=Array.prototype.filter;h.observe(b,{childList:!0,
subtree:!0})}g.exports=function(a,b,e){var f=c.document.body;if(void 0===b||"function"===typeof b)e=b,b={};f=b.container||f;b=b.offset||0;for(var g=0;g<d.length;g++)if(d[g].container===f)return d[g].isInViewport(a,b,e);return d[d.push(h(f))-1].isInViewport(a,b,e)};var d=[],q=c.document.documentElement.compareDocumentPosition?function(a,b){return!!(a.compareDocumentPosition(b)&16)}:c.document.documentElement.contains?function(a,b){return a!==b&&(a.contains?a.contains(b):!1)}:function(a,b){for(;b=b.parentNode;)if(b===
a)return!0;return!1}}).call(this,"undefined"!==typeof global?global:"undefined"!==typeof self?self:"undefined"!==typeof window?window:{})},{}]},{},[1])(1)});
Raw
styles.css
html {
overflow: hidden; /* Desactivate main scroll */
background: #06060D;
}
.popin {
/* Fixed */
position: fixed;
top: 20px;
left: 50px;
right: 50px;
bottom: 20px;
background: white;
/* With local scroll */
overflow-y: auto;
}
.pad {
margin-top: 2000px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment