主机格调

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

登录界面

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

先看这个按钮→DEMO

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

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

按钮

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

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

按钮

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

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

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

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

LOGO

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

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

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

商品列表

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

>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/464.html