图片由模糊变清楚

最新推荐文章于 2021-05-18 17:49:18 发布

转载最新推荐文章于 2021-05-18 17:49:18 发布 · 92 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shuaihan/p/8072845.html

本文介绍了一种使用JavaScript实现的懒加载技术，该技术可在页面加载时先展示模糊图片，待图片完全加载后再替换成高清图片。这种方法可以有效减少初始加载时间，提升用户体验。

<style>
img{
    width:200px;
    height:200px;
}
</style>
<img id="img1" src="高清图片.jpg" style="display:none">
<img id="img" src="模糊图片.jpg">
<script>
    document.getElementById("img1").onload=function(){
            document.getElementById("img1").style.display="block"
            document.getElementById("img").style.display="none"
    }
</script>