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

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/2022010621495179390.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/2022010621495179390.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>

转载于:https://www.cnblogs.com/zhuzhenwei918/p/6828684.html

图片优化方法（有时间看看）相关推荐

网站SEO优化之图片优化方法
网站SEO优化之图片优化方法网站中图片的优化是很多站长都比较容易忽略的细节,我们知道,对于搜索引擎目前的技术来讲,是无法识别图片的内容信息的,但为了提升用户体验,我们在进行文章或者网站布局时,必须进 ...
电商网站的图片优化方法及注意事项
电子商务网站也是需要SEO优化的,尤其是在图片优化上,比如一款新式的女士外套,想要卖的好,必须图片要做的漂亮能够吸引住客户,勾起客户的购买的欲望.所以电子商务网站要做好图片优化是非常有必要的. 电商网 ...
WebP，淘宝都在用的图片优化方法
WebP 是什么? WebP 是一种同时提供了有损压缩与无损压缩的图片文件格式.可以大大压缩图片的大小,并且图片的质量和 png.jpeg 等相同.WebP 的无损压缩比 png 格式的文件平均少了 ...
phpcms attachment.class.php路径,解决phpcms上传不了图片的方法
解决phpcms上传不了图片的方法发布时间:2020-08-11 14:46:54 来源:亿速云阅读:97 作者:小新这篇文章给大家分享的是有关解决phpcms上传不了图片的方法的内容.小编觉得 ...
python制作ico图标_python使用PythonMagic k将jpg图片转换成ico图片的方法
python使用PythonMagic k将jpg图片转换成ico图片的方法发布时间:2017-06-27 08:00 来源:互联网当前栏目:网页设计教程这篇文章主要介绍了python使用Pyt ...
php转为图片,php中base64转换为图片的方法
php中base64转换为图片的方法发布时间:2020-08-31 09:56:18 来源:亿速云阅读:100 作者:小新小编给大家分享一下php中base64转换为图片的方法,相信大部分人都还 ...
php显示网络图片,php中显示图片的方法
php中显示图片的方法发布时间:2020-08-25 14:08:07 来源:亿速云阅读:80 作者:小新这篇文章给大家分享的是有关php中显示图片的方法的内容.小编觉得挺实用的,因此分享给大家 ...
java窗体中添加图片_在java窗体程序中添加图片的方法
在java窗体程序中添加图片的方法发布时间:2020-06-16 11:24:13 来源:亿速云阅读:148 作者:Leah 这篇文章主要为大家详细介绍了在java窗体程序中添加图片的方法,图文详 ...
python数据转换成字节流_python字节流转化成图片最佳方法
python字节流转化成图片最佳方法发布时间:2020-05-08 11:40:42 来源:亿速云阅读:325 今天小编给大家分享的是python字节流转化成图片的详细介绍,相信大部分人都不太了解 ...

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

图片优化方法（有时间看看）相关推荐

最新文章

热门文章