当我们重构完一个页面之后,正常效果看起来很棒,但是有没有关注网速加载过慢或背景图加载失败的情况呢?换言之,有没有在你的页面上测试图片裸奔的情况?先看几张图:

生活家(正常展现)

生活家 - 本地化生活服务平台

生活家(图片裸奔)

生活家 - 本地化生活服务平台

图片裸奔的展现可以看出 “网速加载过慢或背景图加载失败的情况” ,可见其惨不忍睹,甚至是无法进行操作。OK,那么看看我们改良后的展现:

生活家(图片裸奔改良版)

生活家 - 本地化生活服务平台

改良后的展现基本能看出页面区块的划分,而且用户也可以进行操作了。实现方式很简单,就是给有背景图的节点加多一个背景色(现在终于明白css w3c校验有一条警告规则是颜色不能和底色相同了吧?)。

好吧,其实这种方法不是本篇文章所讲的重点,因为这种方法很多人都知道如何运用。不知道大家有没发现,或有这样的烦恼,页面有些特殊字体需要用背景图,可是当图片裸奔时就看不到字了,然而这些特殊字又是比较 重要的操作,见下图:

碰到这种情况该怎么办呢?有一种做法是使用img sprites技术,合成图使用img标签,通过相对定位来调整图片的显示区域,优点是比用css加载背景图要快。虽然重要的内容显示是快了,但是还是无法解决网速过慢或图片加载失败的情况。我的创新方法是,可以不使用img sprites技术,也能很快加载出重要内容并且解决网速过慢或图片加载失败的情况,重点来了,注意看…
以这个用户登录按钮为例,代码如下:

<style type="text/css">
.btn-login:not(s):before{  /* ff、chrome、safari、opera、ie9 */
    content:"";
    position:absolute;left:0;top:0;
    height:100%;width:100%;
    background:url(http://life.tenpay.com/v2/img/tencity.png) no-repeat 0 -401px;
}
.btn-login:not(s){  /* ff、chrome、safari、opera、ie9 */
    position:relative;
    display:block;width:232px;height:52px;
    color:#F85B01;
    background-color:#FFEEC2;
    font:18px/48px "microsoft yahei", simsun;
    text-indent:87px;
    text-decoration:none;
}
.btn-login{  /* ie8、ie7、ie6 */
    display:block;width:232px;height:52px;
    color:#F85B01;
    background:#FFEEC2 url(http://life.tenpay.com/v2/img/tencity.png) no-repeat 0 -401px9;
    overflow:hidden9;
    text-indent:-999px9;
    text-decoration:none;
}
</style>
<a class="btn-login" href="http://life.tenpay.com/v2/0000/index.shtml">用户登录</a>

代码说明:

:not(s) 是css3的否定伪类,目前ie6、ie7、ie8不支持,其它浏览器均支持,具体用法可以参考css3手册,这里的用途是做浏览器hack。
:before 用来和 content 属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容。

好吧,我承认,这种方法有缺陷,即ie6、ie7、ie8浏览器只看到底色,看不到文字~因为ie6、ie7不支持:after伪类和content属性,ie8虽然支持,但是ie8 :after伪类内的content内容的z-index压不住文字(可以拷贝以上代码做测试)。

这种方法不完美,但是可以做浏览器差异化体验。有些同学想要更完美的解决办法,让浏览器全兼容,办法总比困难多,见代码:

<style type="text/css">
.btn-login{
    position:relative;
    display:block;width:232px;height:52px;
    color:#F85B01;
    background-color:#FFEEC2;
    font:18px/48px "microsoft yahei", simsun;
    text-indent:87px;
    text-decoration:none;
}
.btn-login-bg{
    position:absolute;left:0;top:0;
    height:100%;width:100%;
    background:url(http://life.tenpay.com/v2/img/tencity.png) no-repeat 0 -401px;
    cursor:pointer;
}
</style>
<a class="btn-login" href="http://life.tenpay.com/v2/0000/index.shtml">
    用户登录<span class="btn-login-bg"><!-- 背景图 --></span>
</a>

这种全兼容的方法,虽然多了一个空节点,但是对我们页面的体验确有大大提升,所以用得值啊。再看看我们给力优化后的生活家图片裸奔页面示例:

生活家(图片裸奔给力版)

生活家 - 本地化生活服务平台

至此,通过这个优化,相信大家都会有一种想法,为什么img标签有alt文字替代属性,背景图确没有?期待新的css属性在下个版本出现,像 background-alt:”用户登录” ,当背景图加载失败时,显示替代文字“用户登录”。

亲,如果有什么更好的方法,欢迎留言讨论o(∩_∩)o