Skip to content

Instantly share code, notes, and snippets.

@pongstr

pongstr/defer.js

Last active October 8, 2017 12:27
Show Gist options
  • Save pongstr/a6c4a70922984789bee284cdd3d60aaa to your computer and use it in GitHub Desktop.
Save pongstr/a6c4a70922984789bee284cdd3d60aaa to your computer and use it in GitHub Desktop.
Download ZIP
Deferring Image
Raw
defer.js
(function () {
function onLoad() {
return function imageDefer() {
var defer = document.getElementsByTagName('img');
(defer && defer.length < 0) && Object.keys(defer).forEach(function (i) {
(defer[i].getAttribute('data-src')) &&
defer[i].setAttribute('src', defer[i].getAttribute('data-src'));
});
}
}
// Init function inside window.onload
window.onload = onLoad;
})();
Raw
deferred.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Image Defer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style type="text/css">
.container {
width: 50%;
margin: 50px auto;
}
.container img {
width: 100%;
max-width: 100%;
height: auto;
margin-bottom: 25px;
border-radius: 4px;
}
.container h1 {
display: block;
padding: 25px 0;
text-align: center;
border-bottom: 1px solid #ddd;
}
small {
position: fixed;
bottom: 20px;
right: 20px;
padding: 5px 10px;
color: #fff;
border-radius: 5px;
background-color: #000;
opacity: 0;
-webkit-transition: opacity .5s ease-in;
transition: opacity .5s ease-in;
}
small.fadeIn {
opacity: 1;
-webkit-transition: opacity .5s ease-in;
transition: opacity .5s ease-in;
}
.pulsate { animation: pulse .5s infinite; }
@keyframes pulse {
0% { opacity: 0.25; }
50% { opacity: 0.5; }
100% { opacity: 0.25; }
}
</style>
</head>
<body>
<div class='container'>
<h1>Image Defer</h1>
<img class="pulsate" data-src='https://images.unsplash.com/photo-1502083728181-687546e77613' src="data:image/svg+xml,%3Csvg width='1024' height='512' viewBox='0 0 1024 512' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ERectangle%3C/title%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23E0E0E0' d='M0 0h1024v512H0z'/%3E%3Cpath d='M550.5 246c9.11 0 16.5-7.39 16.5-16.5s-7.39-16.5-16.5-16.5-16.5 7.39-16.5 16.5 7.39 16.5 16.5 16.5z' fill='%23F6F6F6' fill-rule='nonzero'/%3E%3Cpath d='M579.438 191H445.563c-5.328 0-9.563 4.333-9.563 9.654v111.692c0 5.32 4.235 9.654 9.563 9.654h133.875c5.327 0 9.562-4.333 9.562-9.654V200.654c0-5.32-4.235-9.654-9.563-9.654zm-35.21 67.445c-1.026-1.194-2.597-2.116-4.372-2.116-1.742 0-2.972.818-4.372 1.944l-6.386 5.39c-1.332.955-2.39 1.603-3.928 1.603-1.468 0-2.8-.545-3.756-1.398-.342-.308-.957-.888-1.47-1.4l-18.373-19.855c-1.365-1.57-3.414-2.558-5.702-2.558s-4.406 1.126-5.737 2.66l-43.2 52.06v-88.87c.34-2.32 2.15-3.99 4.472-3.99h122.16c2.358 0 4.27 1.74 4.407 4.093l.1 88.835-33.843-36.4z' fill='%23F6F6F6' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E">
<img class="pulsate" data-src='https://images.unsplash.com/photo-1502082553048-f009c37129b9' src="data:image/svg+xml,%3Csvg width='1024' height='512' viewBox='0 0 1024 512' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ERectangle%3C/title%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23E0E0E0' d='M0 0h1024v512H0z'/%3E%3Cpath d='M550.5 246c9.11 0 16.5-7.39 16.5-16.5s-7.39-16.5-16.5-16.5-16.5 7.39-16.5 16.5 7.39 16.5 16.5 16.5z' fill='%23F6F6F6' fill-rule='nonzero'/%3E%3Cpath d='M579.438 191H445.563c-5.328 0-9.563 4.333-9.563 9.654v111.692c0 5.32 4.235 9.654 9.563 9.654h133.875c5.327 0 9.562-4.333 9.562-9.654V200.654c0-5.32-4.235-9.654-9.563-9.654zm-35.21 67.445c-1.026-1.194-2.597-2.116-4.372-2.116-1.742 0-2.972.818-4.372 1.944l-6.386 5.39c-1.332.955-2.39 1.603-3.928 1.603-1.468 0-2.8-.545-3.756-1.398-.342-.308-.957-.888-1.47-1.4l-18.373-19.855c-1.365-1.57-3.414-2.558-5.702-2.558s-4.406 1.126-5.737 2.66l-43.2 52.06v-88.87c.34-2.32 2.15-3.99 4.472-3.99h122.16c2.358 0 4.27 1.74 4.407 4.093l.1 88.835-33.843-36.4z' fill='%23F6F6F6' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E">
<img class="pulsate" data-src='https://images.unsplash.com/photo-1452698325353-b90e60289e87' src="data:image/svg+xml,%3Csvg width='1024' height='512' viewBox='0 0 1024 512' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ERectangle%3C/title%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23E0E0E0' d='M0 0h1024v512H0z'/%3E%3Cpath d='M550.5 246c9.11 0 16.5-7.39 16.5-16.5s-7.39-16.5-16.5-16.5-16.5 7.39-16.5 16.5 7.39 16.5 16.5 16.5z' fill='%23F6F6F6' fill-rule='nonzero'/%3E%3Cpath d='M579.438 191H445.563c-5.328 0-9.563 4.333-9.563 9.654v111.692c0 5.32 4.235 9.654 9.563 9.654h133.875c5.327 0 9.562-4.333 9.562-9.654V200.654c0-5.32-4.235-9.654-9.563-9.654zm-35.21 67.445c-1.026-1.194-2.597-2.116-4.372-2.116-1.742 0-2.972.818-4.372 1.944l-6.386 5.39c-1.332.955-2.39 1.603-3.928 1.603-1.468 0-2.8-.545-3.756-1.398-.342-.308-.957-.888-1.47-1.4l-18.373-19.855c-1.365-1.57-3.414-2.558-5.702-2.558s-4.406 1.126-5.737 2.66l-43.2 52.06v-88.87c.34-2.32 2.15-3.99 4.472-3.99h122.16c2.358 0 4.27 1.74 4.407 4.093l.1 88.835-33.843-36.4z' fill='%23F6F6F6' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E">
<img class="pulsate" data-src='https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f' src="data:image/svg+xml,%3Csvg width='1024' height='512' viewBox='0 0 1024 512' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ERectangle%3C/title%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23E0E0E0' d='M0 0h1024v512H0z'/%3E%3Cpath d='M550.5 246c9.11 0 16.5-7.39 16.5-16.5s-7.39-16.5-16.5-16.5-16.5 7.39-16.5 16.5 7.39 16.5 16.5 16.5z' fill='%23F6F6F6' fill-rule='nonzero'/%3E%3Cpath d='M579.438 191H445.563c-5.328 0-9.563 4.333-9.563 9.654v111.692c0 5.32 4.235 9.654 9.563 9.654h133.875c5.327 0 9.562-4.333 9.562-9.654V200.654c0-5.32-4.235-9.654-9.563-9.654zm-35.21 67.445c-1.026-1.194-2.597-2.116-4.372-2.116-1.742 0-2.972.818-4.372 1.944l-6.386 5.39c-1.332.955-2.39 1.603-3.928 1.603-1.468 0-2.8-.545-3.756-1.398-.342-.308-.957-.888-1.47-1.4l-18.373-19.855c-1.365-1.57-3.414-2.558-5.702-2.558s-4.406 1.126-5.737 2.66l-43.2 52.06v-88.87c.34-2.32 2.15-3.99 4.472-3.99h122.16c2.358 0 4.27 1.74 4.407 4.093l.1 88.835-33.843-36.4z' fill='%23F6F6F6' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E">
<img class="pulsate" data-src='https://images.unsplash.com/photo-1441260038675-7329ab4cc264' src="data:image/svg+xml,%3Csvg width='1024' height='512' viewBox='0 0 1024 512' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ERectangle%3C/title%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23E0E0E0' d='M0 0h1024v512H0z'/%3E%3Cpath d='M550.5 246c9.11 0 16.5-7.39 16.5-16.5s-7.39-16.5-16.5-16.5-16.5 7.39-16.5 16.5 7.39 16.5 16.5 16.5z' fill='%23F6F6F6' fill-rule='nonzero'/%3E%3Cpath d='M579.438 191H445.563c-5.328 0-9.563 4.333-9.563 9.654v111.692c0 5.32 4.235 9.654 9.563 9.654h133.875c5.327 0 9.562-4.333 9.562-9.654V200.654c0-5.32-4.235-9.654-9.563-9.654zm-35.21 67.445c-1.026-1.194-2.597-2.116-4.372-2.116-1.742 0-2.972.818-4.372 1.944l-6.386 5.39c-1.332.955-2.39 1.603-3.928 1.603-1.468 0-2.8-.545-3.756-1.398-.342-.308-.957-.888-1.47-1.4l-18.373-19.855c-1.365-1.57-3.414-2.558-5.702-2.558s-4.406 1.126-5.737 2.66l-43.2 52.06v-88.87c.34-2.32 2.15-3.99 4.472-3.99h122.16c2.358 0 4.27 1.74 4.407 4.093l.1 88.835-33.843-36.4z' fill='%23F6F6F6' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E">
</div>
<small id="perfTime"></small>
<script>
const perfElement = document.getElementById('perfTime');
function deferImg() {
const defer = document.getElementsByTagName('img');
Object.keys(defer).forEach((i) => {
if (defer[i].getAttribute('data-src')) {
defer[i].setAttribute('src', defer[i].getAttribute('data-src'))
setTimeout(() => defer[i].classList.remove('pulsate'), 500)
}
})
}
window.onload = () => {
setTimeout(() => {
deferImg();
var perfTime = 'Page Loaded in ' + (performance.now() / 1000).toFixed(2) + ' seconds';
console.info(perfTime);
perfElement.innerHTML += perfTime;
setTimeout(() => perfElement.classList.add('fadeIn'), 1000)
}, 0)
}
</script>
</body>
</html>
Raw
non-deferred.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Image Defer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style type="text/css">
.container {
width: 50%;
margin: 50px auto;
}
.container img {
width: 100%;
max-width: 100%;
height: auto;
margin-bottom: 25px;
border-radius: 4px;
}
.container h1 {
display: block;
padding: 25px 0;
text-align: center;
border-bottom: 1px solid #ddd;
}
small {
position: fixed;
bottom: 20px;
right: 20px;
padding: 5px 10px;
color: #fff;
border-radius: 5px;
background-color: #000;
opacity: 0;
-webkit-transition: opacity .5s ease-in;
transition: opacity .5s ease-in;
}
small.fadeIn {
opacity: 1;
-webkit-transition: opacity .5s ease-in;
transition: opacity .5s ease-in;
}
.pulsate { animation: pulse .5s infinite; }
@keyframes pulse {
0% { opacity: 0.25; }
50% { opacity: 0.5; }
100% { opacity: 0.25; }
}
</style>
</head>
<body>
<div class='container'>
<h1>No Defer</h1>
<img src='https://images.unsplash.com/photo-1502083728181-687546e77613'>
<img src='https://images.unsplash.com/photo-1502082553048-f009c37129b9'>
<img src='https://images.unsplash.com/photo-1452698325353-b90e60289e87'>
<img src='https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f'>
<img src='https://images.unsplash.com/photo-1441260038675-7329ab4cc264'>
</div>
<small id="perfTime"></small>
<script>
const perfElement = document.getElementById('perfTime');
function deferImg() {
const defer = document.getElementsByTagName('img');
Object.keys(defer).forEach((i) => {
if (defer[i].getAttribute('data-src')) {
defer[i].setAttribute('src', defer[i].getAttribute('data-src'))
setTimeout(() => defer[i].classList.remove('pulsate'), 500)
}
})
}
window.onload = () => {
setTimeout(() => {
deferImg();
var perfTime = 'Page Loaded in ' + (performance.now() / 1000).toFixed(2) + ' seconds';
console.info(perfTime);
perfElement.innerHTML += perfTime;
setTimeout(() => perfElement.classList.add('fadeIn'), 1000)
}, 0)
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment