西门的后花园

一个热爱网络的年轻人的博客

CSS优化图片未加载时的布局小技巧

由于宽带问题,家里多人使用网络的时候,打开网站加载网页就不那么快了。特别是带有图片的情况,例如登录页:

登录界面

网速慢的时候按钮这里的图片加载需要一段时间,如上图,很不美观。那么是否有办法优化图片加载慢或者未加载成功时候的方案呢?有!

先看这个按钮→DEMO

第一排是文字按钮,加辅助背景图片。其实有两个按钮,但右侧已经看不见了,因为右侧辅助背景图片未加载出来,严重影响用户体验。

第二排也是同样按钮,同样HTML代码,区别是加了个和辅助背景图片一样颜色的背景色。即使右侧辅助背景图片未加载出来,也可以显示出来文字和背景色,至少基本按钮还是可以看出来了,目的达到了。

按钮

第三排是图片按钮,就是按钮里的文字因为CSS做出来不符合视觉稿要求,所以也放到背景图上。右侧同样有按钮,但因为辅助背景图片未加载出来,严重影响用户体验。

第四排是经过优化的图片按钮,在a链接里加了个span标签包住文字。即使右侧辅助背景图片未加载出来,也可以显示出来文字和背景色,至少基本按钮还是可以看出来了,同样目的达到了。

按钮

不知道大家做网站LOGO的时候是如何处理的,先看看→DEMO

第一排应该是最多人用的,h1包超链接a再包img图片。缺点是如果图片未加载出来,如右侧,空白,影响用户体验。

第二排应该是了解SEO的人会用的。通过一些技巧,把a里面的文字隐藏掉,然后LOGO作为背景图。右侧是LOGO图片未加载出来的情况,空白,依旧影响用户体验。

第三排是第二排的进阶版。不是单纯的隐藏文字,而是把外层容器和图片设置一样大,把文字挤出去,从而看不到文字。右侧是LOGO图片未加载出来的情况,可以看到文字,目的达到了。

LOGO

电商网站很多地方都有商品列表,有图片有标题,看→DEMO

第一排是没有固定图片大小时恰巧图片未加载出来,下面的标题都跟上去了,导致错位。

第二排是设置了图片大小,同时还把图片外面超链接也设置了大小。这样即使图片未加载出来,位置还占着,至少不会错位,目的达到。

商品列表

后记:当大家都能写页面的时候,细节就成区分高下的判定条件了。

评论列表

  1. 这个细节很多人都不注意,这方式挺好

  2. 一直都在乎细节的,需要配合技术。

  3. 除夕来拜个年

    话说一直不太喜欢一个网站太多图

  4. 呵呵,你的技术还是那么牛!
    祝新年快乐,马上发大财!

  5. 好有讲究。新春快乐!

  6. 😈 现在看着图片, 我都要加width\height, 😮 😮 这是有病么

  7. 我还是比较在意ONS的含义是什么。

  8. 这个主意不错哦! 😳

  9. 这个是怎么弄的呢?

  10. 我感觉我这里似乎不会有这种问题… 😉

  11. 哈哈,学习了。博主,你的评论框的"Name"跟输入框没有距离,感觉很别扭。我用的Chrome.

  12. 这个细节经常忽略。

  13. logo技巧不错,希望多分享更多经验。

  14. 其实还可以使用FontAwesome,去掉这些小的CSS图标,或者使用CSS Sprite,一次GET就好。

  15. 这个可以有,没事的时候就考虑各种可以改进的地方。

  16. 提升用户体验,减少页面重绘提高性能,关注细节,赞!

  17. 这个对用户体验很好。下次再我网站也用上。

  18. qnlz

    给你32个赞

郑永进行回复 取消回复

分类目录