馬上圣誕節(jié)了，作為一名程序猿，如何體現(xiàn)自己獨(dú)特的過(guò)節(jié)風(fēng)格，如何在朋友圈發(fā)一張專屬自己的祝福照片我覺(jué)得很有必要，你們說(shuō)是不是。

談到圣誕節(jié)，話說(shuō)程序猿和圣誕之間的關(guān)系還有這么一個(gè)笑話：

Q：程序員為什么總是將萬(wàn)圣節(jié)和圣誕節(jié)弄混？

A：因?yàn)閛ct 31==Dec 25!

停停停...

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

面對(duì)圣誕節(jié)還得加班加點(diǎn)的苦逼程序猿們，我們來(lái)緩解下自己沉悶的心情，發(fā)揮下自己獨(dú)特的藝術(shù)細(xì)胞，是時(shí)候裝一下逼了...

那就讓我們用手頭的IDE工具來(lái)展示一顆圣誕樹吧，沒(méi)有圣誕老人，沒(méi)有圣誕禮物，咱們有圣誕樹。

瞧，出來(lái)了，不是一棵，是一坨。

↓↓↓↓↓↓↓↓↓↓

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

關(guān)鍵是還是自動(dòng)生成的！

這咋搞？咋搞？

下面就和大家一起分享：

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

js2image 是一個(gè)可以把js源代碼壓縮成一個(gè)ascii字符畫的源代碼的工具，它的特色是壓縮后的代碼仍可運(yùn)行，而不是簡(jiǎn)單的拼成最終的圖案哦。

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

安裝完畢后執(zhí)行命令：

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

執(zhí)行完命令后會(huì)生成一個(gè)xmas.js結(jié)尾的文件，打開來(lái)可以看到一棵棵圣誕樹咯。

其他安裝方法可詳見：

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

在線轉(zhuǎn)換地址：http://f2e.souche.com/cheniu/js2image.html

據(jù)說(shuō)壓縮完了99%的代碼都可以正常運(yùn)行哦。

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

今年圣誕咱們就和圣誕樹（還是代碼）過(guò)吧~

PS：js的 new image()

創(chuàng)建一個(gè)Image對(duì)象：var a=new Image();    定義Image對(duì)象的src: a.src=”xxx.gif”;    這樣做就相當(dāng)于給瀏覽器緩存了一張圖片。

圖像對(duì)象：

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

圖像對(duì)象的屬性： border complete height hspace lowsrc name src vspace width

圖像對(duì)象的事件：onabort onerror onkeydown onkeypress onkeyup onload

需要注意的是：src 屬性一定要寫到 onload 的后面，否則程序在 IE 中會(huì)出錯(cuò)。

參考代碼：

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; 

      運(yùn)行上面的代碼后，在不同的瀏覽器中進(jìn)行測(cè)試，發(fā)現(xiàn) IE 和 FF 是有區(qū)別的，在 FF 中，img 對(duì)象的加載包含在 body

的加載過(guò)程中，既是 img加載完之后，body 才算是加載完畢，觸發(fā) window.onload 事件。

      在 IE 中，img 對(duì)象的加載是不包含在 body 的加載過(guò)程之中的，body 加載完畢，window.onload 事件觸發(fā)時(shí)，img

對(duì)象可能還未加載結(jié)束，img.onload事件會(huì)在 window.onload 之后觸發(fā)。

      根據(jù)上面的問(wèn)題，考慮到瀏覽器的兼容性和網(wǎng)頁(yè)的加載時(shí)間，盡量不要在 Image 對(duì)象里放置過(guò)多的圖片，否則在 FF 下

會(huì)影響網(wǎng)頁(yè)的下載速度。當(dāng)然如果你在 window.onload 之后，執(zhí)行預(yù)加載函數(shù)，就不會(huì)有 FF 中的問(wèn)題了。

      可以通過(guò)Image對(duì)象的complete 屬性來(lái)檢測(cè)圖像是否加載完成（每個(gè)Image對(duì)象都有一個(gè)complete屬性，當(dāng)圖像處于

裝載過(guò)程中時(shí)，該屬性值false,當(dāng)發(fā)生了onload、onerror、onabort中任何一個(gè)事件后，則表示圖像裝載過(guò)程結(jié)束（不管成

沒(méi)成功），此時(shí)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 火狐等大眾瀏覽器均支持 Image對(duì)象的onload事件。

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

最新評(píng)論