http://www.jackpu.com/medium-shi-ru-he-zuo-tu-pian-jia-zai-de/
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.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);
/* this is needed so Safari keeps sharp edges */
transform: scale(1);
}
</style>
</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>
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>
时间： 2024-08-05 19:49:56