[javascript] img 요소를 만드는 데 가장 좋은 JavaScript 코드는 무엇입니까

Program / 글쓴이

배경에 이미지 요소를 만들고 아무것도 표시하지 않는 간단한 JS 코드를 만들고 싶습니다. 이미지 요소는 추적 URL (예 : Omniture)을 호출하며 간단하고 강력해야하며 IE 6 = <에서만 작동해야합니다. 내가 가진 코드는 다음과 같습니다.

var oImg = document.createElement("img");
oImg.setAttribute('src', 'http://www.testtrackinglink.com');
oImg.setAttribute('alt', 'na');
oImg.setAttribute('height', '1px');
oImg.setAttribute('width', '1px');
document.body.appendChild(oImg);

이것이 가장 간단하지만 가장 강력한 (오류없는) 방법입니까?

jQuery와 같은 프레임 워크를 사용할 수 없습니다. 일반 자바 스크립트 여야합니다.

답변

oImg.setAttribute('width', '1px');

pxCSS 전용입니다. 다음 중 하나를 사용하십시오.

oImg.width = '1';

HTML을 통해 너비를 설정하거나 :

oImg.style.width = '1px';

CSS를 통해 설정합니다.

이전 버전의 IE는를 사용하여 적절한 이미지를 document.createElement()만들지 않으며 KHTML의 이전 버전은를 사용하여 적절한 DOM 노드를 만들지 new Image()않으므로 완전히 이전 버전과 호환되도록하려면 다음과 같이 사용하십시오.

// IEWIN boolean previously sniffed through eg. conditional comments

function img_create(src, alt, title) {
    var img = IEWIN ? new Image() : document.createElement('img');
    img.src = src;
    if ( alt != null ) img.alt = alt;
    if ( title != null ) img.title = title;
    return img;
}

또한 document.body.appendChild페이지가로드 중일 때 스크립트가 실행될 수 있는지 약간주의 하십시오. 예기치 않은 위치에 이미지가 표시되거나 IE에서 이상한 JavaScript 오류가 발생할 수 있습니다. 로드시 (하지만 <body>요소가 시작된 후) 추가 할 수 있어야하는 경우를 사용하여 본문의 시작 부분에 삽입 해 볼 수 body.insertBefore(body.firstChild)있습니다.

이 작업을 눈에 띄지 않게하지만 실제로 모든 브라우저에 이미지가로드 <div>되도록하려면 본문의 첫 번째 자식 으로 페이지에서 완전히 떨어진 위치에 삽입하고 표시하지 않으려는 추적 / 사전로드 이미지를 넣을 수 있습니다. .

답변

var img = new Image(1,1); // width, height values are optional params 
img.src = 'http://www.testtrackinglink.com';

답변

var img = document.createElement('img');
img.src = 'my_image.jpg';
document.getElementById('container').appendChild(img);

답변

jQuery :

$('#container').append('<img src="/path/to/image.jpg"
       width="16" height="16" alt="Test Image" title="Test Image" />');

HTML 이스케이프 (값이 하드 코딩되지 않은 경우 위 코드에서 수행되어야 함)에 대해 걱정할 필요가 없기 때문에 이것이 훨씬 더 잘 작동한다는 것을 발견했습니다. (JS 관점에서) 읽기도 더 쉽습니다.

$('#container').append($('<img>', {
    src : "/path/to/image.jpg",
    width : 16,
    height : 16,
    alt : "Test Image",
    title : "Test Image"
}));

답변

완전성을 위해 InnerHTML 방식도 사용하는 것이 좋습니다. 비록 최선의 방법이라고 부르지는 않더라도 …

document.getElementById("image-holder").innerHTML = "<img src='image.png' alt='The Image' />";

그건 그렇고, innerHTML은 그렇게 나쁘지 않습니다.

답변

최단 방법 : 

(new Image()).src = "http:/track.me/image.gif";

답변

프레임 워크를 사용할 수 있습니까? jQuery 와 Prototype 은 이런 일을 아주 쉽게 만듭니다. 다음은 Prototype의 샘플입니다.

var elem = new Element('img', { 'class': 'foo', src: 'pic.jpg', alt: 'alternate text' });
$(document).insert(elem);