首页 > 代码库 > 加载图片优化(先用一张小图片做高斯模糊, 再加载大图)
加载图片优化(先用一张小图片做高斯模糊, 再加载大图)
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>
加载图片优化(先用一张小图片做高斯模糊, 再加载大图)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。