基於JS2Image實現聖誕樹代碼，

基於JS2Image實現聖誕樹代碼，

馬上聖誕節了，作為一名程式猿，如何體現自己獨特的過節風格，如何在朋友圈發一張專屬自己的祝福照片我覺得很有必要，你們說是不是。

談到聖誕節，話說程式猿和聖誕之間的關係還有這麼一個笑話：

Q：程式員為什麼總是將萬聖節和聖誕節弄混？

A：因為oct 31==Dec 25!

停停停...

先不笑，咱們先冷靜下...

面對聖誕節還得加班加點的苦逼程式猿們，我們來緩解下自己沉悶的心情，發揮下自己獨特的藝術細胞，是時候裝一下逼了...

那就讓我們用手頭的IDE工具來展示一顆聖誕樹吧，沒有聖誕老人，沒有聖誕禮物，咱們有聖誕樹。

瞧，出來了，不是一棵，是一坨。

↓↓↓↓↓↓↓↓↓↓

 

所有的js代碼都堆成樹了....

關鍵是還是自動產生的！

這咋搞？咋搞？

下面就和大家一起分享：

首先這並非小編原創，之前便有牛逼的大神創造了這一款工具，它叫js2image。

js2image 是一個可以把js原始碼壓縮成一個ascii字元畫的原始碼的工具，它的特色是壓縮後的代碼仍可運行，而不是簡單的拼成最終的圖案哦。

安裝了node和npm的童鞋可以直接使用以下命令安裝js2image：

安裝完畢後執行命令：

其中的路徑./resource/jquery.js為你所要壓縮js的檔案路徑

執行完命令後會產生一個xmas.js結尾的檔案，開啟來可以看到一棵棵聖誕樹咯。

其他安裝方法可詳見：

github地址：https://github.com/xinyu198736/js2image

線上轉換地址：http://f2e.souche.com/cheniu/js2image.html

據說壓縮完了99%的代碼都可以正常運行哦。

哈哈哈，有興趣的童鞋可以嘗試下，

今年聖誕咱們就和聖誕樹（還是代碼）過吧~

PS：js的 new image()

建立一個Image對象：var a=new Image();    定義Image對象的src: a.src=”xxx.gif”;    這樣做就相當於給瀏覽器緩衝了一張圖片。

映像對象：

建立映像對象：映像對象名稱=new Image([寬度],[高度])

映像對象的屬性： border complete height hspace lowsrc name src vspace width

映像對象的事件：onabort onerror onkeydown onkeypress onkeyup onload

需要注意的是：src 屬性一定要寫到 onload 的後面，否則程式在 IE 中會出錯。

參考代碼：

var img=new Image();   img.onload=function(){alert("img is loaded")};   img.onerror=function(){alert("error!")};   img.src="http://www.abaonet.com/img.gif";   function show(){alert("body is loaded");};   window.onload=show; 

      運行上面的代碼後，在不同的瀏覽器中進行測試，發現 IE 和 FF 是有區別的，在 FF 中，img 對象的載入包含在 body

的載入過程中，既是 img載入完之後，body 才算是載入完畢，觸發 window.onload 事件。

      在 IE 中，img 對象的載入是不包含在 body 的載入過程之中的，body 載入完畢，window.onload 事件觸發時，img

對象可能還未載入結束，img.onload事件會在 window.onload 之後觸發。

      根據上面的問題，考慮到瀏覽器的相容性和網頁的載入時間，盡量不要在 Image 對象裡放置過多的圖片，否則在 FF 下

會影響網頁的下載速度。當然如果你在 window.onload 之後，執行預先載入函數，就不會有 FF 中的問題了。

      可以通過Image對象的complete 屬性來檢測映像是否載入完成（每個Image對象都有一個complete屬性，當映像處於

裝載過程中時，該屬性值false,當發生了onload、onerror、onabort中任何一個事件後，則表示映像裝載過程結束（不管成

沒成功），此時complete屬性為true）

var img = new Image();  img.src = oImg[0].src = this.src.replace(/small/,"big");  oDiv.style.display = "block";  img.complete ? oDiv.style.display = "none" : (oImg[0].onload = function() {oDiv.style.display = "none"})

註：

ie Firefox等福士瀏覽器均支援 Image對象的onload事件。

ie8及以下、opera 不支援onerror事件

您可能感興趣的文章:

• javascript 閃爍的聖誕樹實現代碼
• 如何用C語言畫一個“聖誕樹”