图片模糊加载

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

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

图片模糊加载

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

new Image()基本用法

var img=new Image([宽度],[高度])
属性:border|complete|height|hspace|lowsrc|name|src|vspace|width
事件:onabort|onerror|onkeydown|onkeypress|onkeyup|onload

参考代码:

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>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值