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

Posted 2020-09-22 星期九

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

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

<img src="缩略图.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="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