壓縮原始圖片
-
將原始圖片壓縮至1~2kb甚至更小的圖片
nature.jpg - 壓縮 java 圖片壓縮
nature1.jpg -
添加高斯模糊
natureBlur.png -
效果
interview.gif
加載順序
- 展示壓縮后的圖片添加高斯模糊被盈，隨頁面加載而加載
- 頁面load完成之后渴语，開始加載原始圖片
- 原始圖片加載完成之后，替換掉預(yù)覽的壓縮圖片
源碼
- html
<div>
<!-- 圖片未加載完成時(shí)可以通過a標(biāo)簽瀏覽-->
<a >
<img style="width:800px;height:200px"
class="lazy-img"
src="../assets/nature.jpg"
data-original="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature5.jpg"
alt="">
</a>
</div>
- js
function lazyLoad () {
const imgs = document.getElementsByClassName('lazy-img')
let img = new Image()
const oldImg = imgs[0]
img.src = oldImg.getAttribute('data-original')
img.classList.add('real-img')
let replaceImg = function () {
const c = oldImg.parentElement
c.removeAttribute('href')
c.appendChild(img)
c.removeChild(oldImg)
}
const replace = function () {
requestAnimationFrame(replaceImg)
}
if (img.complete)
replace()
else
img.onload = replace
},
window.addEventListener('load', () => {
lazyLoad()
})
- css
img:not(.lazy-img) {
will-change: transform opacity;
width: 800px;
height: 200px;
animation: realImg 0.5s linear;
}
@keyframes realImg {
0% {
filter: blur(15px);
}
100% {
filter: blur(0);
}
}
.lazy-img {
filter: blur(15px);
}
