Last active
May 7, 2019 14:03
-
-
Save invmatt/9c39afd94e22694e46c1bdcdce9d185d to your computer and use it in GitHub Desktop.
Medium style image loading.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
window.onload = function() { | |
var placeholder = $('.progressive-media'), | |
small = $('.progressive-media__small'); | |
var img = new Image(); | |
img.src = small.src; | |
img.onload = function () { | |
small.classList.add('loaded'); | |
}; | |
var imgData = placeholder.data('large'); | |
var imgLarge = '<img class="progressive-media__large" src="'+ imgData +'" />'; | |
small.after(imgLarge); | |
$(".progressive-media__large").load(function() { | |
$(this).addClass('loaded'); | |
}); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="progressive-media" data-large="http://placekitten.com/1400/600"> | |
<img src="http://placekitten.com/100/20" class="progressive-media__small" /> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.progressive-media { | |
position: relative; | |
&__small { | |
opacity: 1; | |
-webkit-filter: blur(50px); | |
filter: blur(50px); | |
} | |
&__large { | |
opacity: 0; | |
} | |
img { | |
position: absolute; | |
z-index: 0; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
transition: opacity 1.3s linear; | |
pointer-events: none; | |
.no-js & { | |
opacity: 1; | |
} | |
&.loaded { | |
opacity: 1; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment