Implementation of Christmas tree code _javascript technique based on js2image

It's Christmas now, as a program ape, how to embody their own unique festive style, how to send a friend in the circle of their own blessing photos I think it is necessary, you say is not.

When it comes to Christmas, there's a joke about the relationship between the ape and Christmas:

Q: Why do programmers always confuse Halloween with Christmas?

A: Because Oct 31==dec 25!

Stop, stop, stop ...

Don't laugh first, let's calm down ...

In the face of Christmas also have to work overtime the ape, we come to ease their own dull mood, play under their own unique art cells, it is time to pretend to force ...

So let's use the IDE tools on hand to show a Christmas tree, no Santa Claus, no Christmas presents, we have a Christmas tree.

See, come out, not a tree, is a lump.

↓↓↓↓↓↓↓↓↓↓

All the JS code is stacked into a tree ....

The key is still automatically generated!

What the hell is this? What the hell?

Here we share with you:

First of all, this is not a small series of original, before the great God created this tool, it is called Js2image.

Js2image is a tool that can compress the JS source code into an ASCII character drawing, which is characterized in that the compressed code can still run, rather than simply spell the final pattern.

Children's shoes with node and NPM are installed to install Js2image directly using the following command:

Execute command after installation:

The path to it./resource/jquery.js for you to compress the file path of JS

After executing the command, you will generate a Xmas.js end file, open to see a Christmas tree slightly.

Other installation methods can be described as follows:

GitHub Address: Https://github.com/xinyu198736/js2image

Online Conversion Address: http://f2e.souche.com/cheniu/js2image.html

It is said that 99% of the code is compressed to normal operation OH.

hahaha, interested in the children's shoes can try,

This Christmas we'll have a Christmas tree (or code).

Ps:js New Image ()

Create an Image object: var a=new image ();    Defines the src:a.src= "xxx.gif" of the image object; Doing so would be equivalent to caching a picture for the browser.

Image objects:

Creating an Image object: Image object name =new image ([width],[height])

Properties of Image objects: Border complete height hspace lowsrc name src vspace width

Event for Image object: Onabort onerror onkeydown onkeypress onkeyup OnLoad

Need to note that: src attribute must be written to the onload behind, otherwise the program in IE will be wrong.

Reference code:

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 ');}; 
  

Run the above code, in different browsers to test, found that IE and FF are different, in the FF, the IMG object loading included in the body

Loading process, is not only after the IMG loaded, the body is considered loaded, triggering window.onload events.

In IE, the IMG object loading is not included in the body loading process, the body loaded, window.onload event triggered, img

The object may not have finished loading, and the Img.onload event will be triggered after window.onload.

According to the above problem, considering the browser compatibility and Web page loading time, try not to put too many images in the image object, otherwise under FF

can affect the download speed of the Web page. Of course, if you perform a preload function after window.onload, there is no problem with FF.

You can detect whether an image is loaded by using the complete property of the image object (each image object has a complete property, and when the image is

This property value is False when the load is in progress, after any one of the onload, onerror, and Onabort events indicates the end of the image loading process (whether

Not successful), at this time the complete property is 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"})

Note:

IE Firefox and other popular browsers support the image object's onload event.

IE8 and below, Opera does not support OnError events