图片优化方法（有时间看看）

最新推荐文章于 2022-10-15 20:08:25 发布

weixin_34162228

最新推荐文章于 2022-10-15 20:08:25 发布

阅读量348

点赞数

文章标签： ux javascript ViewUI

Image构造函数的使用：

使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片构造函数</title>
</head>
<body>
    <script>
        var imgObj = new Image();
        imgObj.src = "http://tse2.mm.bing.net/th?id=OIP.sS7WCxBwmTTEGu5GQ2bjZwEpEs&w=199&h=200&c=7&qlt=90&o=4&dpr=1.25&pid=1.7";
        document.body.appendChild(imgObj);
    </script>
</body>
</html>

即通过new Image() 创建的是一个Image对象，然后src属性来指定路径，最后通过appendChild插入body中即可。关键： imgObj就相当于一个html对象。

<!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>
    <h3>大图片加载从模糊到清晰</h3>
    <div class="content">
        <img class="thumbnails" src="https://img-blog.csdnimg.cn/2022010708062294858.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>

原文链接：http://www.cnblogs.com/wangmeijian/p/6822674.html

<!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> <h3>大图片加载从模糊到清晰</h3> <div class="content"> <img class="thumbnails" src="https://img-blog.csdnimg.cn/2022010708062294858.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>

weixin_34162228

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片优化方法（有时间看看）

Image构造函数的使用：使用方法如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图片构造函数&lt;/title&gt;&lt;/head&gt;
复制链接

扫一扫