zoukankan      html  css  js  c++  java
  • web前端图片模糊到清晰的实现过程

    在网页图片显示的时候,会发现许多网站采用了先模糊,然后在慢慢清晰的过程,这样的加载用户体验是比较好的,那么如何实现?

    默认加载2张图片,一张缩略图,一张原图,当打开网页的时候默认只显示缩略图,然后我们把缩略图模糊处理后按照原图尺寸显示,这样做的目的是为了提高用户体验;

    使用js去监听原图的加载,当原图加载成功后,我们把缩略图隐藏,让原图显示出来。这样就实现了图片由模糊变成清晰的过程,为了让变化有渐变效果,我们需要使用到css的transition属性。具体代码实现如下:

    html:

    <div class="box">

      <img src="images/playboy-s.jpg" class="bg"/>

      <img src="images/playboy-b.jpg" class="show_img"/>

    </div>

    css:

    .box{

             position: relative;overflow: hidden;height: 300px; 300px;

    }

    .box img{

             100%;height: 100%;

    }

    .box .bg{/*缩略图*/

             display: block;filter: blur(15px);transform: scale(1);

    }

    .box .show_img{/*加载完成显示的实际图*/

             position: absolute;opacity: 0;top: 0;left: 0;transition: opacity 1s linear;

    }

    js:

    <script>

    var show_img=document.querySelector('.show_img'),

    /*图片加载完成*/ 

    show_img.onload = function () {

             show_img.style.opacity="1";

    };

    </script>

    如果不需要有渐变效果,可以采用如下方法

    <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是完整图

  • 相关阅读:
    一道某高大上互联网公司的笔试题分享
    人机博弈-吃子棋游戏(四)搜索算法
    人机博弈-吃子棋游戏(三)走法生成
    人机博弈,吃子棋游戏(二)如何算气
    eclipse手动导入dtd文件
    spring BeanFactory概述
    xp的虚拟机如何访问本地主机上的文件
    XML Schema 简介
    DTD 简介
    spring开发相关网址
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/11760435.html
Copyright © 2011-2022 走看看