去年是最忙碌的一年,實在沒時間寫博客了,看著互聯(lián)網行業(yè)中一個又一個人的倒下,奉勸大家,健康要放在首位,保重身體。
好了,言歸正傳,這是17年的第一篇博文,話說這天又是產品同學跑過來問我說:hi,lenny,你看現(xiàn)在市面上流行各種裝逼H5,隨便輸入點名字啥的就給我生成房產證了,這種還可以分享出去,傳播率可高了,或者你再看這里,一鍵生成邀請函,牛逼吧,要不你也幫我做一個這個功能,我去玩點傳播手段。
我看見效果后第一反映就是,肯定canvas進行的圖片拼接,現(xiàn)在市面上流行的效果具體是如何實現(xiàn)的我沒有去看源碼,思路很清晰,于是晚飯后沒有下班,開始我的插件制作之旅了。
首先,我們需要思考,既然是圖片處理,那么就必然存在圖片下載,我們知道圖片的onload是異步回調,所有的資源必須在下載完成后才可以進行接下來的邏輯,前置資源下載的邏輯就很關鍵,我們不僅需要在onload事件回調后去處理我們后續(xù)的流程,同時需要在所有必須資源加載完成后才執(zhí)行,所以我們需要構建一個資源數(shù)組大致如下:
[{ { name: 'bg', src: '../img/bg.jpg' }, { name: 'z', src: '../img/z.png' }]
為了獲得最終的complete事件,我們需要利用一個全局變量監(jiān)聽onload或者onerror次數(shù):
網友評論