• 凉风有兴,秋月无边, 亏我思娇的情绪好比度日如年。
  • 虽然我不是玉树临风,潇洒倜傥, 可是我有我广阔的胸襟,加强健的臂腕!

【JavaScript】图片加载由模糊变清晰 —— 图片优化

网站推广 villain 3周前 (11-22) 4次浏览 未收录 0个评论

开发过程中,一些图片的展示时,加载很慢很久,后来把图片缩放压成缩略图吧,速度是快了但是模糊不清,如何处理这样问题,下面就和大家分享一下自己的处理方法。

先让客户端加载像素小的缩略图:

 img src="http://www.1004619.com/p.php?p=缩略图.jpg" name="pic" width="800" height="600" id="news" / 
然后用js处理:
var img = new Image();//新建一个图片对象 
img.src = "原图.jpg"; //最终显示的大图
img.onload = function() { 
 document.getElementById('news').src = this.src; 
}

示例代码

 img src="http://www.1004619.com/p.php?p=images/playboy-s.jpg" name="myImage" width="960" height="1285" id="myImage" alt="懒人图库" / 
 script language="JavaScript" type="text/javascript" 
 var img = new Image();
 img.src = "images/playboy-b.jpg";
 img.onload = function() {
 document.getElementById('myImage').src = this.src;
 /script 

playboy-s是缩略图,playboy-b是完整图

这样就实现预加载缩略图,最终显示像素高的原图,这样做的好处是避免用户长时间等待图片而跳出或者对产品的烦躁情绪。

原文地址:http://www.ibloger.net/article/403.html


Villain博客 , 版权所有丨如有问题请联系客服QQ:1004619丨
转载请注明【JavaScript】图片加载由模糊变清晰 —— 图片优化
喜欢 (0)
[gqakcom@126.com]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址