由于宽带问题,家里多人使用网络的时候,打开网站加载网页就不那么快了。特别是带有图片的情况,例如登录页:
网速慢的时候按钮这里的图片加载需要一段时间,如上图,很不美观。那么是否有办法优化图片加载慢或者未加载成功时候的方案呢?有!
先看这个按钮→DEMO←
第一排是文字按钮,加辅助背景图片。其实有两个按钮,但右侧已经看不见了,因为右侧辅助背景图片未加载出来,严重影响用户体验。
第二排也是同样按钮,同样HTML代码,区别是加了个和辅助背景图片一样颜色的背景色。即使右侧辅助背景图片未加载出来,也可以显示出来文字和背景色,至少基本按钮还是可以看出来了,目的达到了。
第三排是图片按钮,就是按钮里的文字因为CSS做出来不符合视觉稿要求,所以也放到背景图上。右侧同样有按钮,但因为辅助背景图片未加载出来,严重影响用户体验。
第四排是经过优化的图片按钮,在a链接里加了个span标签包住文字。即使右侧辅助背景图片未加载出来,也可以显示出来文字和背景色,至少基本按钮还是可以看出来了,同样目的达到了。
不知道大家做网站LOGO的时候是如何处理的,先看看→DEMO←
第一排应该是最多人用的,h1包超链接a再包img图片。缺点是如果图片未加载出来,如右侧,空白,影响用户体验。
第二排应该是了解SEO的人会用的。通过一些技巧,把a里面的文字隐藏掉,然后LOGO作为背景图。右侧是LOGO图片未加载出来的情况,空白,依旧影响用户体验。
第三排是第二排的进阶版。不是单纯的隐藏文字,而是把外层容器和图片设置一样大,把文字挤出去,从而看不到文字。右侧是LOGO图片未加载出来的情况,可以看到文字,目的达到了。
电商网站很多地方都有商品列表,有图片有标题,看→DEMO←
第一排是没有固定图片大小时恰巧图片未加载出来,下面的标题都跟上去了,导致错位。
第二排是设置了图片大小,同时还把图片外面超链接也设置了大小。这样即使图片未加载出来,位置还占着,至少不会错位,目的达到。
后记:当大家都能写页面的时候,细节就成区分高下的判定条件了。
好主意!
啥好主意?
😛
你名字我猛一看还以为是“尼玛” 😮
这个细节很多人都不注意,这方式挺好
你头像的字设计得挺好的 😀
一直都在乎细节的,需要配合技术。
只有你了解相关技术,才会做得更好 😆
除夕来拜个年
话说一直不太喜欢一个网站太多图
呵呵,你的技术还是那么牛!
祝新年快乐,马上发大财!
好有讲究。新春快乐!
新春愉快~
😈 现在看着图片, 我都要加width\height, 😮 😮 这是有病么
我也有这是癖好,不过固定不变大小的图片,加宽高挺好的 😈
我还是比较在意ONS的含义是什么。
one night stand(一“页”情)
只可意会不可言传
裤带已解
肥皂已丢
楼下已捡
这个主意不错哦! 😳
这个是怎么弄的呢?
我感觉我这里似乎不会有这种问题… 😉
哈哈,学习了。博主,你的评论框的"Name"跟输入框没有距离,感觉很别扭。我用的Chrome.
等着换主题,不改了
学到一招!
这个细节经常忽略。
logo技巧不错,希望多分享更多经验。
😉 不错
其实还可以使用FontAwesome,去掉这些小的CSS图标,或者使用CSS Sprite,一次GET就好。
你说的应该是这个吧:https://ximan.org/436.html
CSS Sprite确实不错
这个可以有,没事的时候就考虑各种可以改进的地方。
提升用户体验,减少页面重绘提高性能,关注细节,赞!
这个对用户体验很好。下次再我网站也用上。
给你32个赞