zoukankan      html  css  js  c++  java
  • 【JavaScript】图片加载由模糊变清晰 —— 图片优化

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

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

    <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

  • 相关阅读:
    将excel单元格中的内容,批量转化成批注
    装饰器的入门到精通
    自定义dict
    python2.7 + PyQt4安装
    一些好用的python模块
    人工智能-自然语言处理
    websocket-单群聊
    UA池和代理池
    scrapy框架持久化存储
    SQL Server 2012 酸爽的安装体验
  • 原文地址:https://www.cnblogs.com/yesu/p/7010003.html
Copyright © 2011-2022 走看看