Created
March 24, 2016 02:42
-
-
Save cheft/efdd29aaee8ed3e24afb to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>大图片加载方案</title> | |
| <style> | |
| html, | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .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%; | |
| transition: opacity 1s linear; | |
| } | |
| .placeholder img.loaded { | |
| opacity: 1; | |
| } | |
| .img-small { | |
| filter: blur(50px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="placeholder" data-large="bg.jpg"> | |
| <img src="bg-small.jpg" class="img-small"> | |
| <div style="padding-bottom: 62.6%;"></div> | |
| </div> | |
| <script> | |
| 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); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment