Implementing Christmas tree code based on JS2Image_javascript skills

Christmas is coming soon. As a programmer, I think it is very necessary to reflect your own unique holiday style and how to post a photo of your own blessings in Moments. Do you think so?

Speaking of Christmas, there is a joke about the relationship between programmers and Christmas:

Q: Why do programmers always confuse Halloween and Christmas?

A: Because oct 31==Dec 25!

Stop, stop, stop...

Don’t laugh yet, let’s calm down first...

Facing the hard-working programmers who have to work overtime on Christmas, let’s relieve our dull mood and give full play to our unique artistic abilities. It’s time to show off...

Let us use the IDE tools at hand to display a Christmas tree. There is no Santa Claus, no Christmas gifts, we have a Christmas tree.

Look, it came out, not a tree, but a lump.

↓↓↓↓↓↓↓↓↓↓

All js codes are piled into trees....

The key is that it is automatically generated!

What's going on? What to do?

I will share it with you below:

First of all, this is not the original creation of the editor. A great master has created this tool before, it is called js2image.

js2image is a tool that can compress js source code into an ascii character drawing source code. Its feature is that the compressed code can still be run, instead of simply being assembled into the final pattern.

Children’s shoes with node and npm installed can directly use the following command to install js2image:

After installation is complete, execute the command:

The path ./resource/jquery.js is the path of the js file you want to compress

After executing the command, a file ending with xmas.js will be generated. When you open it, you can see Christmas trees.

For other installation methods, please see:

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 can run normally after being compressed.

Hahaha, if you are interested in children’s shoes, you can try them,

Let’s spend Christmas this year with a Christmas tree (still code)~

PS: js new image()

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

Image object:

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

Attributes of the image object: border complete height hspace lowsrc name src vspace width

Events of image objects: onabort onerror onkeydown onkeypress onkeyup onload

It should be noted that the src attribute must be written after onload, otherwise the program will error in IE.

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");}; 
  window.onload=show; 

After running the above code, we tested it in different browsers and found that there is a difference between IE and FF. In FF, the loading of the img object is included in the body

During the loading process of

, after the img is loaded, the body is considered to be loaded, and the window.onload event is triggered.

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

The object may not be loaded yet, and the img.onload event will be triggered after window.onload.

Based on the above question, considering the compatibility of the browser and the loading time of the web page, try not to place too many pictures in the Image object, otherwise under FF

It will affect the download speed of web pages. Of course, if you execute the preloading function after window.onload, there will be no problems in FF.

You can check whether the image is loaded through the complete attribute of the Image object (each Image object has a complete attribute, when the image is in

During the loading process, the attribute value is false. When any of the onload, onerror, and onabort events occurs, it means that the image loading process is over (regardless of whether it is

Unsuccessful), the complete attribute is true at this time)

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:

Internet Firefox and other popular browsers support the onload event of the Image object.

IE8 and below, Opera does not support onerror event