一张默认图片引发关于,什么应该前端来做,什么应该需要后台的配合
2017-03-15 23:01
465 查看
思考是对我最好的奖励,思考让我深沉,思考让目标明确,让生活多彩!
很多网站都存在图片展示,有图片也伴随着有默认图片的展示,以前从来没有过多的去想,小小的一张默认图片却有如此多的知识和思想在里面;
1.有前后端的分离问题
2.有前端自我优化的问题
3.有用户体验问题
4.前端和后端交互的过程中,那些变与不变的思考
5.问题的答案从来都不是一个
提示:本人思考过后的总结,也可以是思考的草稿,一直不喜欢写文章,是因为自己写出的东西很烂,条理性和逻辑性都不强,由于最近和「李笑来」老师学习写作,自己本身也有这方面的想法,也算是半推半就的开始行动起来了;
我和默认图片之间的故事:
自己在接触默认图片这个概念的时候,应该是很久很久以前,真正自己做默认图片的展示,是15年的某一天,当时的我还很青涩,也只是一个页面制作的小白,记得当时也没有过多的思考这个问题,就让后台把图片地址改成默认图片地址就行了;
但今天回头想想,那些不变的东西,为什么要让后台来做呢,首先后台来做,就需要多一层次的判断,是否有图片,如果没有才传默认图片;以前没有觉得这一个层次有什么大不了的,最近几个月一直接触和围绕性能优化相关的问题和思考,才真的感受到,多一层和少一层相差的远远不是一层;
自己在慕课网学习结构和样式分离的那节课,老师说:
这样一个结构,初级前端、中级前端和高级前端是如何思考的;
三者之间的区别,只是层级的多少,为此我默默地思考了许久,好似恍然大悟,不停的问自己,为什么自己没有深入思考过这个经常出现在嘴边的词语----结构与样式分离;然后我去实践,当时我正好做公司官网首页二期(2017年的2月末),其实是我最开始无法做出我想要的效果,才会出现二期一说的;16年的时候,公司官网首页第二次制作,产品和设计只是简单的说,做个有动画的网站,我当时的心情是很复杂的,有欣喜也有难受,欣喜的是我一直努力希望自己能够做成有动画效果的网站;难受的是我不会,或者说我会的是改变元素width\height\top\left\bottom\right等一些需要定位,还影响结构展示,性能很差的JS动画;自己光想想就糟透了,在看看别人家的CSS3动画,最后只能是分成两期来做,为了这最后的二期,我整整准备了2个多月,从开始的分析自己不足的知识,和了解一个动画网页应具有的基础知识,加上自己寻找相关知识和教程,再到自己日复一日的学习,到最终的成型,再到优化,再到颠覆;关于动画网站先说到这,发现说了半天有些跑题了;
来做个对比:
我最初认为的默认图片的位置:<img src="图片地址" alt="">
我现在认为的默认图片的位置:
<img src="默认图片地址" alt="">
<img src="展示图片地址" alt="" style="position:absolute;">
简单来说说,我所谓的前后分离,默认图片和展示图片地址不再同一个位置,展示图片加了定位,说明展示图片在默认图片的上方,当没有展示图片的时候,自然就显示默认图片了;
同时又存在一个问题,img标签当图片地址为空的时候,在页面显示一个
残缺的样子,额···,这不是我们要的结果呀;难道需要我们用JS来判断图片是否有链接,但是我们又如何来判断链接是否正确呢,如果不正确的链接或者说链接过去不是图片,那结果不还是一个样子吗?想到这,发现好复杂,还是回去用同一个结构吧!让后台自己解决吧,我们可以喝咖啡去了;
别急,接着思考,我们往回走,想想,图片的展示难道只有这一种吗,还有background-image属性呀!
我们来看上面的代码重新思考,当我们使用background-image的时候,图片就算为空、就算不是图片地址,也不影响展示,因为默认不是图片就不会有任何效果,而下面一直默默等待的默认图片自然就展示给用户看了;
当然,使用img标签和background-image属性,两者各有利弊,而经过我这近三年的实践发现其实都可以用属性的方式来进行展示,当然要是思考语义化和百度爬虫等问题,那就需要对需要的图片使用img标签了,那就采取后台来解决是一件很不错的选择;
小总结:上面的问题,引起了一直存在于自己内心的一个深层次无边界的问题,什么事情是前端来做,什么事情是后端来做;其实关于这个问题很多人都说过,当我看了那些五花八门的答案后依然充满迷茫,经过这次的思考,我得出一个属于我的结论----那就是不变的元素我们应该尽最大努力用前端的方式进行实现,即使是那些需要后台数据的元素,其中也有不变的地方,比如需要后台给出用户的头像地址数据,用户头像地址是变化的量,而不变的量就是默认图片;所以在变化中找到那些不变的量,然后想办法用前端的手段实现我们想要的效果;
同时,当我们用JS做插件的时候,做的多了也有同样一个结论,那就是找到那些不变的规律,然后规律的进行变化,就出现了一个有动态的插件了
其实上面说的,五个优点,可以说他们是相等的关系;
1.前端能做的事尽量去做,减少和后端的交互,自然前后端就分离了
2.不需要后端去判断是否要传默认图片,自然就是优化了,是基于第一种的优化;所以,引起一个概念,什么是优化,优化就是现在这个解决问题的答案前面还有一个答案,那现在这个答案就是优化
3.以前需要后台来进行判断,自然需要后台来传图片,既然判断没有的时候才传图片,自然就会有短暂的空白期,而我们优化后的图片,在页面加载的时候就已经加载完了,而且现在默认图片都可以使用文字形式的icon,加载速度更快
4.找到不变的元素,实现不变的思想,展示出一张变化的网页,给用户最好的体验
5.解决问题本来就不是一个答案,之所以之前是一个答案,那时因为,最开始,我能实现出来,都是问题,自然就是一个答案了;随着自我的成长,答案渐渐的变成了选优
很多网站都存在图片展示,有图片也伴随着有默认图片的展示,以前从来没有过多的去想,小小的一张默认图片却有如此多的知识和思想在里面;
1.有前后端的分离问题
2.有前端自我优化的问题
3.有用户体验问题
4.前端和后端交互的过程中,那些变与不变的思考
5.问题的答案从来都不是一个
提示:本人思考过后的总结,也可以是思考的草稿,一直不喜欢写文章,是因为自己写出的东西很烂,条理性和逻辑性都不强,由于最近和「李笑来」老师学习写作,自己本身也有这方面的想法,也算是半推半就的开始行动起来了;
我和默认图片之间的故事:
自己在接触默认图片这个概念的时候,应该是很久很久以前,真正自己做默认图片的展示,是15年的某一天,当时的我还很青涩,也只是一个页面制作的小白,记得当时也没有过多的思考这个问题,就让后台把图片地址改成默认图片地址就行了;
但今天回头想想,那些不变的东西,为什么要让后台来做呢,首先后台来做,就需要多一层次的判断,是否有图片,如果没有才传默认图片;以前没有觉得这一个层次有什么大不了的,最近几个月一直接触和围绕性能优化相关的问题和思考,才真的感受到,多一层和少一层相差的远远不是一层;
自己在慕课网学习结构和样式分离的那节课,老师说:
这样一个结构,初级前端、中级前端和高级前端是如何思考的;
三者之间的区别,只是层级的多少,为此我默默地思考了许久,好似恍然大悟,不停的问自己,为什么自己没有深入思考过这个经常出现在嘴边的词语----结构与样式分离;然后我去实践,当时我正好做公司官网首页二期(2017年的2月末),其实是我最开始无法做出我想要的效果,才会出现二期一说的;16年的时候,公司官网首页第二次制作,产品和设计只是简单的说,做个有动画的网站,我当时的心情是很复杂的,有欣喜也有难受,欣喜的是我一直努力希望自己能够做成有动画效果的网站;难受的是我不会,或者说我会的是改变元素width\height\top\left\bottom\right等一些需要定位,还影响结构展示,性能很差的JS动画;自己光想想就糟透了,在看看别人家的CSS3动画,最后只能是分成两期来做,为了这最后的二期,我整整准备了2个多月,从开始的分析自己不足的知识,和了解一个动画网页应具有的基础知识,加上自己寻找相关知识和教程,再到自己日复一日的学习,到最终的成型,再到优化,再到颠覆;关于动画网站先说到这,发现说了半天有些跑题了;
来做个对比:
我最初认为的默认图片的位置:<img src="图片地址" alt="">
我现在认为的默认图片的位置:
<img src="默认图片地址" alt="">
<img src="展示图片地址" alt="" style="position:absolute;">
简单来说说,我所谓的前后分离,默认图片和展示图片地址不再同一个位置,展示图片加了定位,说明展示图片在默认图片的上方,当没有展示图片的时候,自然就显示默认图片了;
同时又存在一个问题,img标签当图片地址为空的时候,在页面显示一个
残缺的样子,额···,这不是我们要的结果呀;难道需要我们用JS来判断图片是否有链接,但是我们又如何来判断链接是否正确呢,如果不正确的链接或者说链接过去不是图片,那结果不还是一个样子吗?想到这,发现好复杂,还是回去用同一个结构吧!让后台自己解决吧,我们可以喝咖啡去了;
别急,接着思考,我们往回走,想想,图片的展示难道只有这一种吗,还有background-image属性呀!
<style> .box{ position:relative; } .base{ backgorund:url(图片地址) no-repeat center; background-size:cover; } .img{ backgorund:url(图片地址) no-repeat center; background-size:cover; position:absolute; } </style> <div class="box"> <div class="base"></div> <div class="img"></div> </div>
我们来看上面的代码重新思考,当我们使用background-image的时候,图片就算为空、就算不是图片地址,也不影响展示,因为默认不是图片就不会有任何效果,而下面一直默默等待的默认图片自然就展示给用户看了;
当然,使用img标签和background-image属性,两者各有利弊,而经过我这近三年的实践发现其实都可以用属性的方式来进行展示,当然要是思考语义化和百度爬虫等问题,那就需要对需要的图片使用img标签了,那就采取后台来解决是一件很不错的选择;
小总结:上面的问题,引起了一直存在于自己内心的一个深层次无边界的问题,什么事情是前端来做,什么事情是后端来做;其实关于这个问题很多人都说过,当我看了那些五花八门的答案后依然充满迷茫,经过这次的思考,我得出一个属于我的结论----那就是不变的元素我们应该尽最大努力用前端的方式进行实现,即使是那些需要后台数据的元素,其中也有不变的地方,比如需要后台给出用户的头像地址数据,用户头像地址是变化的量,而不变的量就是默认图片;所以在变化中找到那些不变的量,然后想办法用前端的手段实现我们想要的效果;
同时,当我们用JS做插件的时候,做的多了也有同样一个结论,那就是找到那些不变的规律,然后规律的进行变化,就出现了一个有动态的插件了
其实上面说的,五个优点,可以说他们是相等的关系;
1.前端能做的事尽量去做,减少和后端的交互,自然前后端就分离了
2.不需要后端去判断是否要传默认图片,自然就是优化了,是基于第一种的优化;所以,引起一个概念,什么是优化,优化就是现在这个解决问题的答案前面还有一个答案,那现在这个答案就是优化
3.以前需要后台来进行判断,自然需要后台来传图片,既然判断没有的时候才传图片,自然就会有短暂的空白期,而我们优化后的图片,在页面加载的时候就已经加载完了,而且现在默认图片都可以使用文字形式的icon,加载速度更快
4.找到不变的元素,实现不变的思想,展示出一张变化的网页,给用户最好的体验
5.解决问题本来就不是一个答案,之所以之前是一个答案,那时因为,最开始,我能实现出来,都是问题,自然就是一个答案了;随着自我的成长,答案渐渐的变成了选优
相关文章推荐
- 关于Glide显示默认图片的问题(circleImageView配合问题)
- 关于前端html图片和文件上传和后台接收方法
- 我们应该讨论什么? 就面向对象的讨论所引发的一些思考
- 由于自己的需要搜集的一些关于 “ javascript实现图片的不间断连续滚动” 的代码
- 系统“不幸”需要重装时应该备份什么?
- MySQL 中一个库中表数量是否有限制?表太多是否影响数据的性能?比如要把一张表拆成 1024 张,对于每个表的性能的影响是什么?这些影响需要考虑哪些因素?
- 在zen cart后台订单中添加一张对应的商品图片和键接,在查看订单时就方便多了(转)
- 【蛙蛙王子】wawa客户服务应该达到的功能,大家看看还有什么需要补充
- 前端的价值究竟是什么?未来应该如何发展?(转)
- [J2EE]使用 EJB 组件你需要了解些什么呢?--是一些关于使用条件的判断标准
- 将图片显示到textarea中但是传到后台什么也没有。
- 在线的图片、js、css压缩优化工具介绍(配合小强视频 前端性能分析精要)
- 由于自己的需要搜集的一些关于 “ javascript实现图片的不间断连续滚动” 的代码
- 一张对前端有意义的图片
- 关于O/R Mapping的思考,我们应该选择什么?(转)
- 关于img标签使用默认图片的方法
- 前端开发工程师应该关注什么?
- 关于O/R Mapping的思考,我们应该选择什么?
- 如何让后台管理员登录默认需要输入验证码?
- 二十岁的男人(应该需要做什么)