蠢只是借口,不是原因

在知道lazyload插件之后,我的任务是延迟加载banner,首先想都没有想就要直接用插件(有现成的不用非要自己写那不是傻吗),果断去了解插件怎么使用,按照人家的demo,依着葫芦画瓢,也没有继续往下看文档。发现自己的代码原来不是img标签,而是div的background-image ,后来发现lazyload中用到的load事件根本不能用在div上,只能用在适用于任何带有 URL 的元素(比如图像、脚本、框架、内联框架),所以,为了实现效果,果断将原来的div换成了img ,欣喜的完成之后,才发现,浏览器的窗口变化banner的图片就会被拉伸或者压缩,这果断不符合要求,结果就是Try again。

又将原来的代码还原,再次自己阅读人家lazyload的文档,发现,人家的插件是支持用div的banckground-image的,于是果断再次照着葫芦画瓢,代码是完成了,但是效果却没有实现,后来才发现,原来是lazyload和bootstrap的carousel插件起了冲突,无奈,不能改原来的代码,没有别的部分就会收到影响,于是就开始各种尝试,将lazyload的class为lazy的div放进carousel插件的class为item的div内部,结果简直就是惊喜,效果看起来是实现了。于是就屁颠屁颠的上交自己的作品,让老大检查。结果就是再次被驳回,因为不符合需求,需求是优先加载第一屏,让页面刚打开的时候就能很快的完全显示,而自己做的是在页面加载完成之后才开始加载的banner。于是又是Try again。

再次理解了需求之后,这次要求不用插件,而是自己写代码。好吧,既然要自己写,就要在使用了carousel的前提下理清思路再开工。于是就将自己的思路写在纸上,没办法,都怪自己的空间逻辑思维能力不够用啊,所有只能借助纸笔了。首先,banner加载的时机就是carousel的滚动,而自己不能修改carousel.js,不能让它再出发滚动的时候就加载banner,但是滚动的触发对于代码的变化就是动态的给div移除和添加active 类,于是我就想只要是js操作active类的div以及它的下一个div加载图片就可以了,其他的div就不加载background-image。按照这个思路写好之写好之后,发现第一张和第二张banner已经加载好了,但是js只是执行了一遍,如何让它持续的检测active类并执行将data-original转换成background-image呢,于是就想到了setTimeout()和clearTimeout(),于是将data-original转换成background-image 的代码封装成函数用setTimeout()调用,我以为的效果是实现了,但是开销太大了,因为要不停的执行那段js,就算第一张已经将data-original转换成了background-image了之后还是会再次执行,于是我就在想clearTimeout的时机,就在active类的那个div和下一个div转换好之后就clearTimeout,但是问题又来了,使用了clearTimeout之后就真的结束了,就不会再次启动了,后面的banner还没有加载出来,怎么办呢?于是我又想有什么事件可以触发,然后执行setTimeout,为了找到这个我真的是绞尽脑汁啊 ,发现可以给轮播的那个小圆点添加click事件,这样在点击小圆点的时候就不会加载不出来图片,我就给li添加了click事件,点击小圆点触发执行setTimeout然后加载banner实现了,但是自动轮播的那个还是没有实现,怎么办呢?于是,再次开始绞尽脑汁,估计我的脑细胞真的是已经死伤无数了,但是又不能说自己做不出来,便开始了研究carousel 的文档,希望能够从中找到突破点,结果,皇天不负有心人啊,真的让我找到了,slide.bs.carousel事件,bootstrap上的描述是当调用 slide 实例方法时立即触发该事件,我一想,这不就是我一直苦苦追寻的吗?当然,答案是肯定的 。并且有了它之后我也不用在给小圆点上绑定事件了,也不用什么setTimeout了,这次真的是欣喜若狂,估计就和范进中举的心情是一样的,只不过我没有疯而已。这次的效果和我想要实现的效果是一样的,顿时,这么多天一直悬着的心终于落下了,不过事实证明我高兴的太早了。我将自己的成果给老大看,老大同样的问题问了我三遍,banner加载优化的需求是什么,目的是什么?当听到这句话的时候我简直蒙了,难道我的语文水平已经退化到幼儿园的地步了?,我又将我上面描述的说了一遍,都说再一再二不能再三,可是我。。。。多谢老大耐心的指导,感激不尽啊!遇到这样的小弟也是悲催啊。

经过指点,我发现我做的所有的效果都是在页面加载之后才加载的banner 。当时想的是js在页面的后面,按照浏览器的加载顺序,怎么着写js都是先加载页面后加载banner。我不知所措,请求指点,老大让我看了他做的,对比了线上的和自己的。我简直说不出话了,原来自己一直都在一个误区里,自己以为的延时加载就是要延迟将data-original 转换成background-image,而自己一直在做的工作同样也是这个,所以banner总是在页面加载完成之后在加载。

我原来没有觉得学习一项新的东西那么痛苦,我现在到了简直是要抓狂的节奏,难道是我原来学的东西都是不求甚解,所以才觉得简单?可能我原来只停留在会用的层面上,但是,对于现在的我来说会用根本不行。但是我还不能够放弃,当然一方面是因为我现在还要吃饭填饱肚子,我还没有达到羽化成仙的境界;另一方面是因为我不想以后还过着这样的日子。有时候我再想是不是其他行业就没有那么困难,我每次都在挣扎,可是我在想如果其他的行业也是这样的怎么办呢?难道我又要放弃再换其他的行业?那样的话我岂不是一事无成。有时候感到很委屈,莫名其妙的感觉委屈,不对,不应该说是委屈,是因为自己学不会而感觉自己很笨,自己跟自己生闷气的感觉。即使是这样,同样要每天没心没肺的开怀大笑。就权当是发泄一下喽。

刚看到指派的任务是lazy加载,当时并不知道这是什么东西,结果百度了一下,原来lazyLoad是一款插件,当时略微看了这款插件之后,就觉得这款插件应该应用于那种大量使用图片的网站,像淘宝啦 蘑菇街啦 美丽说啦之类的,当然,人家那些网站已经不屑于用这种小插件了,人家用的本身就是高大上的流式布局,但我实在是没有想到我们网站的首页的banner加载还要延时加载,瞬间有一种杀鸡用了牛刀的感觉。经过仔细的了解之后才明白图片加载还是很容易拖慢页面加载的进度的,或者这种拖慢在某种网速下看不出来,但是在网速比较差,或者信号不是很好的情况下就很明显。这才发现,原来老大一直都是在精益求精,而自己竟然有这种“差不多就可以了”观念,或许对于大多数人一开始都会有这种观点,后来人家经过脱变(我觉得是被逼的),成就了精益求精。同样,我也是被逼的,简直到了抓狂的地步,然后感慨一句,书到用时方恨少啊。

对比完之后瞬间感觉自己就像那个猪一样的队友,但是,蠢只是借口,不是原因。真正的原因是自己太属于行动派了,拿到任务就蒙着头开始干,缺少理性的分析,没有真正的理解就开始动手;第二就是自己太浮躁了,学东西还是留在表面,没有深入理解就开始使用,并以为自己会用就算是会了;第三,看东西不仔细,经常忽略掉一些东西。像我这种急性子的人,难道这就是传说中的性格缺陷?原来一直以为那些自己才是最大的敌人,战胜自己才是成功之类的话只是高谈阔论,原来是真的。

那问题又来了,我该怎么做呢?或许这个东西还真的得靠我自己。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,602评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,442评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,878评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,306评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,330评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,071评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,382评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,006评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,512评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,732评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,283评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2 345

推荐阅读更多精彩内容