`new Image ()`와`document.createElement ( 'img')`사이에 차이점이 있습니까?

`new Image ()`와`document.createElement ( 'img')`사이에 차이점이 있습니까?

---

자바 스크립트에서 다음을 수행 할 수 있습니다.

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

내 질문은 두 가지 접근 방식 사이에 차이점이 있습니까? 나는 어딘가에서 읽었습니다 Image. Form,, 그리고 호스트 객체Element 라고 불리는 것이 사실입니까? 그렇다면 호스트 개체 란 무엇입니까?

어떤 접근 방식이 바람직합니까?

---

자세한 참조는 찾을 수 없지만 MDCHTMLImageElement 예제 의 주석을 기반으로하면 ImageDOM 레벨 0의 document.createElement일부인 반면 DOM 레벨 2의 일부인 것 같습니다 .

DOM 레벨 0은 Netscape에서 개발했으며 웹 사이트의 특정 요소에 액세스하는 방법을 제공했습니다. 기본적으로 모든 브라우저는 이전 버전과의 호환성을 위해 지원합니다.
그러나 솔직히 이해가 안 돼요 왜Image 생성자가 존재까지 내가 그것을 이해로, 할 수있는 방법이 없었다 때문에, 조작 DOM 레벨 0과 문서를 어쩌면 그것은 단지를 만들 브라우저에 의해 내부적으로 사용되었다 사물.

DOM 레벨 2는 W3C에서 개발 한 공식 표준입니다.

DOM 레벨에 대한 자세한 내용은 quirksmode.org-Level 0 DOM 및 Wikipedia를 참조하십시오 .

---

나는 어딘가에서 읽었습니다 Image. Form,, 그리고 호스트 객체Element 라고 불리는 것이 사실입니까?

예.

그렇다면 호스트 개체 란 무엇입니까?

인 ECMAScript 사양 동기를 부여 호스트는이 방법을 객체 :

ECMAScript는 호스트 환경 내에서 계산을 수행하고 계산 개체를 조작하기위한 개체 지향 프로그래밍 언어입니다. 여기에 정의 된 ECMAScript는 계산적으로 자급 자족하지 않습니다. 실제로이 사양에는 외부 데이터의 입력이나 계산 된 결과의 출력에 대한 조항이 없습니다. 대신 ECMAScript 프로그램의 계산 환경은이 사양에 설명 된 개체 및 기타 기능뿐만 아니라 설명 및 동작이 다음을 나타내는 것을 제외하고이 사양의 범위를 벗어난 특정 환경 특정 호스트 개체를 제공 할 것으로 예상됩니다. 액세스 할 수있는 특정 속성과 ECMAScript 프로그램에서 호출 할 수있는 특정 기능을 제공 할 수 있습니다.

과

ECMAScript의 실행 환경을 완료하기 위해 호스트 환경에서 제공하는 호스트 개체 개체입니다.
참고 네이티브가 아닌 모든 개체는 호스트 개체입니다.

따라서 사양에 정의되어 있지 않고 환경에서 제공하는 모든 개체는 호스트 개체 입니다. 예를 들어 브라우저에서 window, document및 console.

---

두 줄은 동일하며 둘 다 HTMLImageElement 개체를 만듭니다. 유일한 차이점은 네임 스페이스가 혼합 된 XML 문서입니다. new Image()항상 <img>XHTML 네임 스페이스 가있는 요소를 반환 document.createElement('img')하지만 항상 그렇게하는 것은 아닙니다.

---

요구 사항 :

우리 팀에서는 angular 5 애플리케이션을 구축하고 있습니다. 기능 요구 사항은 단일 페이지 애플리케이션의 특정 위치에서 필요할 때 다시로드하지 않고 다시로드하지 않고 다시 사용하기 위해 구성 요소로드시 이미지를 미리로드하는 것이 었습니다.

1. img = new Image (); 방법:

DOM에서 이미지를 미리로드하려고했지만 create new Image()이미지 src URL을 재사용 할 때 브라우저는 항상 소스 파일을 다시로드 하거나 헤더가 수정되었는지 (캐시가 활성화 된 경우) 확인하여 미리로드에 성공했지만 재사용 할 때마다 서버로의 왕복은 다시 만들었습니다.

2. img = document.createElement ( 'img') 방법 :

우리가 document.createElement('img')이미지 소스를 reloaded하지 않았을 때 문서의 로컬 메모리에서 재사용되었고 img src URL에 대한 추가 요청이 이루어지지 않았습니다 .

나는 그 이유를 정말로 이해하지 못하지만 이것이 우리가 발견 한 주요 차이점입니다. 다른 사람이 미리로드 된 이미지를 재사용해야하는 경우 나중에 대역폭을 절약하고 왕복 요청 횟수를 줄이는 방법이 있습니다. :)

---

저는 개인적으로 createElement를 고수 할 것입니다. 왜냐하면 이미지를 모든 것이 동일하게 만드는 특별한 경우가 아니기 때문입니다. jquery가 모든 것에 appendChild (node) 메서드를 사용한다는 것을 알았고 그 차이점을 잘 모르겠습니다. 그것과 귀하의 질문에 두 가지 방법이 있지만 jquery는 크로스 브라우저에서 작동합니다.

---

기술적 차이가 무엇인지 모르겠지만 다음 코드 에서 new Image()로 변경하여 IE8 버그를 수정했습니다 document.createElement('img'). IE8에서는 Image생성자를 사용할 때 onload 콜백이 실행되지 않았습니다 .

newImage = document.createElement('img');
//newImage = new Image();

newImage.onload = function () {
  callback(this.width, this.height);
};

newImage.src = image.src;

---

웹 구성 요소로 작업 할 때 이미지를 만드는 두 가지 방법 간에는 몇 가지 중요한 차이점이 있습니다. 예를 들어 document.createElement가져온 HTML 문서 내 에서 접근 방식 을 사용하는 경우 (사용 <link rel="import" href="...">) 이미지는 기본 문서의 DOM에 추가 될 때까지 실제로로드되지 않습니다 . 자세한 내용은 이 SO 질문 / 답변 을 참조하십시오.

참고 URL : https://stackoverflow.com/questions/6241716/is-there-a-difference-between-new-image-and-document-createelementimg