利用JS实现图片模糊加载技术-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45221036/article/details/108284995

本文介绍了如何使用JavaScript中的HTML Image对象实现图片模糊加载，包括基本用法和具体实现步骤，通过设置属性和监听事件来优化网页性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片模糊加载

需要使用到JS中的HTML对象中的Image类。

`new Image()`基本用法

参考代码：

var img = new Image();  
img.onload = function () {
  alert("img is loaded")
};  
img.onerror = function () {
  alert("error!")
};  
img.src = "http://www.baidu.com/img.gif";  
function show(){
  alert("body is loaded");
}  
window.onload = show;

具体实现：

<!DOCTYPE html>
<html>
  <head>
    <title>大图片加载从模糊到清晰</title>
    <style type="text/css">
        .content {
            position: relative;
        }
        .thumbnails {
            width: 300px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            filter: blur(4px);
            transition: all 0.7s;
        }
        .complete {
            filter: blur(0);
        }
    </style>
</head>

<body>
    <div class="content">
        <img class="thumbnails" src="http://img8.zol.com.cn/bbs/upload/10569/10568721.jpg">
    </div>
    <script type="text/javascript">
      var ele = document.querySelector('.thumbnails');
        // 为了看到效果加个延时
      setTimeout(function () {
        // 若图片URL失效请自行替换
        var imgUrl = 'http://img8.zol.com.cn/bbs/upload/10569/10568721.jpg';
        var imgObject = new Image();
        imgObject.src = imgUrl;//创建一个图片即开始请求图片，
        imgObject.onload = function () {//当图像装载完毕时调用的事件。
          ele.src = imgUrl;
          ele.setAttribute('class', 'thumbnails complete');
        }
      }, 1000)
  </script>
</body>
</html>