Is there a difference between `new Image()` and `document.createElement('img')`?

In javascript, I can do:

img1 = new Image();
img2 = document.createElement('img');

my question is, is there a difference between the two approach? I've read somewhere that Image, Form, and Element is called host objects, is this true? If it is, what are host objects?

Which approach is preferable?

I couldn't find any detailed reference but based on the comment in the MDC - HTMLImageElement example, it seems that Image is part of DOM level 0 whereas document.createElement is part of DOM level 2.

DOM level 0 was invented by Netscape and provided a way to access the certain elements of the website. Basically all browsers support it for backwards compatibility.
But to be honest, I don't understand why the Image constructor exists there, because, as far as I understood it, there was no way to manipulate the document with DOM level 0. Maybe it was only used internally by the browser to create the objects.

DOM level 2 is an official standard developed by the W3C.

For more information about the DOM levels, have a look at at quirksmode.org - Level 0 DOM and Wikipedia.

I've read somewhere that Image, Form, and Element is called host objects, is this true?

Yes.

If it is, what are host objects?

The ECMAScript specification motivates host objects this way:

ECMAScript is an object-oriented programming language for performing computations and manipulating computational objects within a host environment. ECMAScript as defined here is not intended to be computationally self-sufficient; indeed, there are no provisions in this specification for input of external data or output of computed results. Instead, it is expected that the computational environment of an ECMAScript program will provide not only the objects and other facilities described in this specification but also certain environment-specific host objects, whose description and behaviour are beyond the scope of this specification except to indicate that they may provide certain properties that can be accessed and certain functions that can be called from an ECMAScript program.

and

host object
object supplied by the host environment to complete the execution environment of ECMAScript.
NOTE Any object that is not native is a host object.

So any object that is not defined in the specification and provided by the environment is a host object. These are for example in a browser (among others): window, document and console.

Requirements:

In my team, we are building angular 5 application. The feature requirement was to preload images on component load, in order to reuse the them without loading again when needed in specific place in our Single Page Application.

1. img = new Image(); way:

We tried preloading images in DOM by create new Image() but when we reused the image src URL, the browser always reloaded the source file or checked if the header is modified (if cache enabled) which means preloading was sucessful but for every reuse, the roundtrip to server was made again.

2. img = document.createElement('img') way:

When we did the same with document.createElement('img') the image source was not reloaded, rather reused from local memory of the document and no extra request was made for the img src URL.

I do not really understand why, but this is a major difference that we discovered. In case anyone else needs to reuse the Preloaded images, the later would be the way to go to save some bandwith and few request roundtrips :)

The two lines are equivalent and both create HTMLImageElement object. The only difference is in XML document with mixed namespaces - new Image() always returns <img> element with XHTML namespace, document.createElement('img') doesn't always do this.