Reproducing Medium loading image effect
How do I make an reproducing medium loading image effect?
This is an attempt to reproduce the image loading animation seen on Medium, for my post https://jmperezperez.com/medium-image-progressive-loading-placeholder/ where I write about how to load images in a progressive way.. What is a reproducing medium loading image effect? How do you make a reproducing medium loading image effect? This script and codes were developed by José Manuel Pérez on 12 January 2023, Thursday.
Reproducing Medium loading image effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Reproducing Medium loading image effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="placeholder" data-large="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"> <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" class="img-small"> <div style="padding-bottom: 66.6%;"></div>
</div> <script src="js/index.js"></script>
</body>
</html>Reproducing Medium loading image effect - Script Codes CSS Codes
.placeholder { background-color: #f6f6f6; background-size: cover; background-repeat: no-repeat; position: relative; overflow: hidden;
}
.placeholder img { position: absolute; opacity: 0; top: 0; left: 0; width: 100%; -webkit-transition: opacity 1s linear; transition: opacity 1s linear;
}
.placeholder img.loaded { opacity: 1;
}
.img-small { -webkit-filter: blur(50px); filter: blur(50px); /* this is needed so Safari keeps sharp edges */ -webkit-transform: scale(1); transform: scale(1);
}Reproducing Medium loading image effect - Script Codes JS Codes
window.onload = function() { var placeholder = document.querySelector('.placeholder'), small = placeholder.querySelector('.img-small') // 1: load small image and show it var img = new Image(); img.src = small.src; img.onload = function () { small.classList.add('loaded'); }; // 2: load large image var imgLarge = new Image(); imgLarge.src = placeholder.dataset.large; imgLarge.onload = function () { imgLarge.classList.add('loaded'); }; placeholder.appendChild(imgLarge);
}
| Developer | José Manuel Pérez |
| Username | jmperez |
| Uploaded | January 12, 2023 |
| Rating | 4.5 |
| Size | 2,240 Kb |
| Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
| Name | Size |
| Blur effect when scaling up a small image | 1,527 Kb |
| Responsive grid using grid | 1,890 Kb |
| Drawing SVGs - Spotify Logo | 3,059 Kb |
| Responsive grid using flexbox | 2,128 Kb |
| Spotify - Now Playing Visualization | 2,783 Kb |
| Spotify - Now Playing Visualization - With news ticker | 3,765 Kb |
| Alerting window popup | 1,358 Kb |
| Spotify SVG | 2,319 Kb |
| Flexbox for image layout | 1,498 Kb |
| Reproducing Medium loading image effect - WebP version | 2,402 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
| Name | Username | Size |
| Mostly Fluid | Mccreath | 3,308 Kb |
| Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
| Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
| Email Marketing Mock | Kristenzirkler | 8,224 Kb |
| Basic 3D Fullscreen Transition | Apetrov | 3,270 Kb |
| A Pen by Theun | Tjoen | 6,152 Kb |
| Another brick in the wall | Fivera | 1,955 Kb |
| Lunar eclipse | Ademilter | 2,056 Kb |
| Scroll using CSS | Casperovic | 2,159 Kb |
| Canvas Fireworks | Jackrugile | 6,200 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!