一件事情的发生总是有原因的，当然更多的是对技术本身的追求，一定要搞懂啦，废话不多说，大宝剑直插主题。

  • 起因
  1. 以前做过一个xx项目，在登陆界面背景图片中，直接引用了一张大图，css类似于这样(background-image:url(a.jpg))，然后啪啪啪调试了一下，丑恶的面容出来，图片是从上往下一片一片的出来，交互和用户体验差到了极点，特别在网速不好的时候特别明显。（不建议测试图片使用恐怖图片，效果你懂滴，嘿嘿嘿）
  2. 有一次突然的机会看到QQ空间背景图片，看到背景图片的显示是那么的优雅，那么的淡然。心里哭着想到，妈的终于找到解决的问题了，但是由于各种不可抗拒的原因一直推迟研究，知道这几天才翻出来，把QQ空间源代码抠出来研究了一番。

　　　　效果图比较：

　　　　

　　　　　　

具体大家可以自己设置个大图做测试，和进QQ空间登陆首页进行测试

  • 原理

佛说有因必有果，所以出现这个状况肯定是有原因的。所以主要原因还是浏览器的渲染问题，浏览器是从上往下进行页面渲染的，当你设置background-image的时候，浏览器就解析这个属性，然后去下载这个图片。但是由于图片一般都不会太小，所以浏览器不可能一次性将文件请求过来，所以请求了多少渲染多少，所以就像拉窗帘式的一点点的下来，直到请求完了，全部渲染完成。通俗一点的例子就是浏览器解析div和table的效果，div是有多少我渲染多少，但是table你必须全部加载完我再渲染

  • 研究过程

1.　 首先去QQ空间首页，使用chrome的Network工具监控所有请求的js文件，发现不是很多的混淆后的js文件和一个不断刷新二维码的请求，这样没有找到有用的，值得看的东西（混淆的东西格式化了之后没看出啥玩意，哈哈）。

2.　但是俺不气馁，然后在Element中检查dom和style，开始发现好玩的东西了，空间中所使用的背景并不是使用background-image来实现的，它是一个div，然后检查这个div的样式，以及<img>标签的样式，然后我不断调试这些样式（就是一个一个的撤销再加载），最后发现当我撤销opacity: 1;样式的时候，背景图片开始淡出了，然后再点又开始淡入，好了，发现重点了！！！

3.　开始仔细关注着几个标签的样式，发现罪魁祸首是css3的opacity和transition属性。前端开发的应该不陌生，一个是透明度，一个是旋转变换（....旋转变换我闭着眼...妈的，都快唱起来了）。可以看效果

4.　作为一个严谨，对自己代码负责的工程师，我将QQ空间的首页拿到不同浏览器进行测试，最主要就是IE，因为其他浏览器装的话，默认都是最新版本，几乎都支持CSS3的属性了，只有IE这个傻Ⅹ才会这么多事，虽然IE6退出了市场，但是IE8-9还是有很多人用的，在IE下测，出现问题了，图片出现再也没有那么装逼的淡出效果了，检查了一下IE8中 渲染不出opacity和transition，IE9渲染不出transition，所以坑爹呀。至于图片不是一块一块加载，稍微查了下QQ空间在页面中写的js，使用的延迟加载。

  • 代码实现
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            margin: 0;

            padding: 0;

            border: 0;

        }

        .backgroundShow{

            position: absolute;

            left: 0;

            top: 0;

            z-index: -1;

            overflow: hidden;

            width: 100%;

            height:100%;

        }

        .backgroundImg{

            position: absolute;

            left: 0;

            top: 0;

            z-index: -2;

        }

        .showImg{

            opacity: 1;

        }

        .lay_background_img{

            transition: opacity 2s ease;

            opacity: 0;

        }

    </style>

</head>

<body>

    <div id="showImg" class="backgroundShow">

        <img id="ImgShow" class="lay_background_img backgroundImg">

    </div>

</body>

<script src="lib/test.js"></script>

<script>

    +function(){

        loadImage('http://z.k1982.com/show_img/201303/2013033012383895.jpg',imgLoaded);

    }();

    function loadImage(url, callback) {

        var img = new Image();

        img.src = url;

        img.onload = function(){ //图片下载完毕时异步调用callback函数。

            callback.call(img); // 将callback函数this指针切换为img。

        };

    }

    function imgLoaded(){

        var img = document.getElementById("ImgShow");

        img.setAttribute("src",this.src);

        if(img.style.opacity!=undefined){

            img.style.opacity=1;

        }

    }

</script>

</html>

　　废话不说，代码已贡献出来。大家可以直接测试。但是，写了这么多js代码，太烦了，这不是我开发的原则，我要偷懒，越少代码越好。所以我想到插件啦，因为Jquery的普遍运用，我选择了jquery插件，其实其他库和原生插件也考虑的，但是已经写了就先写jquery插件啦。

  • 插件实现

对于插件，我们都要从严谨的角度出发，因为一个成熟的插件是要考虑和完善很多东西的，不能让别人或者自己使用出现千奇百怪的问题，所以这个简单的插件兼容了IE8-9的淡出，而且抛出了一些配置，包括淡出动画时间的问题呀，包括多个动画随机显示功能（属于闲得蛋疼），其他功能大家有兴趣可以自己随机拓展，直接上代码

//延迟加载图片

        var imageT;

        var imgObjArr = new Array;

        if(options.isRandom){

            for(var i = 0;i<options.imgArr.length;i++){

                imageT = new Image();

                imageT.src = options.imgArr[i];

                imgObjArr.push(imageT);

            }

        }else {

            imageT = new Image();

            imageT.src = options.imgArr[0];

            imgObjArr.push(imageT);

        }

        //动态显示

        imageT.onload =function(){

            console.log(options.isRandom)

            if(options.isRandom){

                var result =Math.round(Math.random() * (options.imgArr.length - 1));

                $("#ImgShow").attr("src",options.imgArr[result]);

            }else{

                $("#ImgShow").attr("src",options.imgArr[0]);

            }

            //对于统一不支持css3属性的用jquery的fadeIn解决淡出问题

            if($("body")[0].style.opacity==undefined || $("body")[0].style.transition==undefined){

                $("#divShow").fadeIn(options.imgSecond);

            }else{

                $("#ImgShow").css({"opacity":"1"});

            }

           };

　　只是一些，不贴太多了，篇幅太长，可以到github上来下载，记得加颗星哦，关注哦，么么哒~~~~

github地址：  https://github.com/GerryIsWarrior/setBackgroundImage_js

QQ空间首页背景图片淡出解析与不足完善的更多相关文章

  1. Android NineGridLayout — 仿微信朋友圈和QQ空间的九宫格图片展示自定义控件

    NineGridLayout 一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件. GitHub:https://github.com/HMY314/NineGridLayout 一.介绍 1.当只 ...

  2. QQ空间的“神奇”图片

    近几天好多朋友问我qq空间出现的神奇图片原理,最近比较烦,事情比较多,一直没理.加上我对PHP之类的语言也一知半解. 今天闲了看了一下QQ空间,发现这个很早以前就有人写过这样的帖子了 看别人解释 (转 ...

  3. vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现

    1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...

  4. 首页背景图片在PC端有显示，在手机端不显示的解决方法

    今天看博客的资源大小,发现背景图片有44k大的吓人,准备压缩一下. 压缩之后才发现,我的背景图片在手机端是没有显示的.原因是背景图片不支持缩放. 上网查了下,发现加入如下代码之后就支持缩放了: bac ...

  5. 仿qq空间相册的图片批量上传

    效果: 转载请注明:http://www.cnblogs.com/TheViper/ 主要是flash组件的tilelist,这个很有用.还有对flash组件源码的一点修改hack. 还是代码很简单, ...

  6. 【web前端优化之图片模糊到清晰】看我QQ空间如何显示相片

    前言 此篇文章估计不会太长,有移除首页的风险,但是老夫(称老夫是因为我们真正的叶小钗其实都100多岁啦)是不会怕滴.所以,我来了哟! 题外话:今天我们一起还看了一道前端的面试题,而后我本来还想多找几道 ...

  7. 抓取Bing每日图片作为网站首页背景

    把Bing搜索的背景图片设置为自己网站的背景,实现背景及资讯的每日更新 效果图如下: 理一下思路,首先我们要抓取Bing的每日图片及最新资讯,然后保存图片及信息到本地,最后显示图片及资讯到网站首页. ...

  8. 使用PHP打造QQ空间神奇图片

    说明 你一定在qq空间遇到过这样的东西:打开一张图片,上面有你的QQ号和昵称,你觉得很神奇,是不是? 其实原理很简单,那张图片是动态生成的,上面显示的信息是根据你访问的Url获得的,然后用程序动态的画 ...

  9. jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

随机推荐

  1. spark配置文件和执行部分代码

    export SPARK_DAEMON_JAVA_OPTS="-Dspark.deploy.recoveryMode=ZOOKEEPER-Dspark.deploy.zookeeper.ur ...

  2. UVALive - 6434 —（思维题）

    题意:给出了你由n个数组成的序列,让你将这个序列分为成m个集合,使得每一个集合的最大值减最小值的差相加最小.(如果某集合只有一个数字,则最大值减最小值为0) . 思路:首先我们不难想到,最优的分配方法 ...

  3. Markdown编辑器——常用语法

    Markdown是什么? 简短来说,他就是一款特别适用于写博客的编辑器.为什么适合呢,因为它特别的方便.以博客园的编辑界面来说,它原本的界面是这样的(有没有一种Word2003的既视感): 但是,当你 ...

  4. XEvent--基础

    --SQL Server 扩展事件具有高度可伸缩且高度可配置的体系结构,--使用户能够按需收集解决性能问题或确定性能问题所需的信息.--1. 性能损耗小--2. 可配置性高--3. 可捕获底层事件 - ...

  5. WebApi 插件式构建方案：重写的控制器获取工厂

    body { border: 1px solid #ddd; outline: 1300px solid #fff; margin: 16px auto; } body .markdown-body ...

  6. sql-修改每条数据的某一个字段的值

    update B set B.maildata =(select SUBSTRING(maildata,0,3) from basedata where basedata.cid = B.cid)+( ...

  7. 简述System.Windows.Forms.Timer 与System.Timers.Timer用法区别

    System.Windows.Forms.Timer 基于窗体应用程序 阻塞同步 单线程 timer中处理时间较长则导致定时误差极大. System.Timers.Timer 基于服务 非阻塞异步 多 ...

  8. 数论入门2——gcd,lcm,exGCD,欧拉定理,乘法逆元,(ex)CRT,(ex)BSGS,(ex)Lucas,原根,Miller-Rabin,Pollard-Rho

    数论入门2 另一种类型的数论... GCD,LCM 定义\(gcd(a,b)\)为a和b的最大公约数,\(lcm(a,b)\)为a和b的最小公倍数,则有: 将a和b分解质因数为\(a=p1^{a1}p ...

  9. 3分钟解决MySQL 1032 主从错误（转）

    转自  https://blog.51cto.com/suifu/1845457 3分钟解决MySQL 1032主从错误 Part1:写在最前 1032错误----现在生产库中好多数据,在从库误删了, ...

  10. [总结帖] 后端MVC V.S. 前端MVVM

    Web编年史: Web1.0 —— 静态页面.简单预处理语言草案:PHP.JSP.ASP Web2.0 —— 企业级架构.一站式解决方案(MVC):J2EE.Spring.Asp.net Web2.5 ...