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

107

배경에 이미지 요소를 만들고 아무것도 표시하지 않는 간단한 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와 같은 프레임 워크를 사용할 수 없습니다. 일반 자바 스크립트 여야합니다.

javascript dhtml

— 피트
소스

2

"최고"를 정의하십시오. 가장 빠르다? 가장 간단합니까?

— Andrew Hedges

1

@steveniseki he used en.wikipedia.org/wiki/Hungarian_notation

— Iiridayn

82

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>되도록하려면 본문의 첫 번째 자식 으로 페이지에서 완전히 떨어진 위치에 삽입하고 표시하지 않으려는 추적 / 사전로드 이미지를 넣을 수 있습니다. .

— Bobince
소스

4

new Image()모든 상황에서 가장 잘 작동 하지 않을까요 ?

— Alexis Wilke 2016

52

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

— 약간
소스

19

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

— 마이클 L 페리
소스

@AndreiCristianProdan console.log각 줄 사이에 사용 하면 어떤 줄이 고정되는지 정확히 알 수 있습니다.

— Rodrigo

12

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

— 대릴 하인
소스

24

그는 특별히 jQuery를 요청하지 않았습니다.

— Alex

2

또한 텍스트를 코드로 파싱하는 것은 무의미하고 비효율적이며 평범한 게으름입니다. 이 글을 읽는 사람은 그렇게하지 마십시오. 즉, <img ... />DOM 에 리터럴 을 삽입하는 경우 innerHTML 로 수행하십시오 . 난 그냥 이해가

— 안가요

7

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

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

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

— Binny VA
소스

2

이 방법을 50x50 이미지 격자에 사용했습니다. 위의 추가 방법을 시도했을 때 실행 시간이 150ms에서 2250ms로 뛰었습니다. 그래서 innerHTML이 훨씬 더 효율적이라고 생각합니다.

— Nicholas

4

최단 방법 :

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

— Aemkei
소스

2

문서에 추가하지 않으면 이미지 src를 전혀 가져올 수 없습니다 (브라우저에 따라 다름).

— bobince

1

누구든지 DOM에 연결되지 않은 경우 해당 이미지를 가져 오지 않는 브라우저의 경우가 있습니까?

— antoine129

2

IE, FF, Chrome 및 Safari에서 테스트했습니다. 모두 DOM에 추가하지 않고 이미지를로드합니다. 이전 브라우저의 문제입니까?

— Seanonymous

3

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

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

— Swilliams
소스

3

당신은 간단히 할 수 있습니다 :

var newImage = new Image();
newImage.src = "someImg.jpg";

if(document.images)
{
  document.images.yourImageElementName.src = newImage.src;
}

단순 :)

— 니틴 반살
소스

2

전체 HTML JS 예제를 추가하기 위해

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>create image demo</title>
    <script>


        function createImage() {
            var x = document.createElement("IMG");
            x.setAttribute("src", "http://www.iseebug.com/wp-content/uploads/2016/09/c2.png");
            x.setAttribute("height", "200");
            x.setAttribute("width", "400");
            x.setAttribute("alt", "suppp");
            document.getElementById("res").appendChild(x);
        }

    </script>
</head>
<body>
<button onclick="createImage()">ok</button>
<div id="res"></div>

</body>
</html>

— Vaibs
소스

0

다른 사람들이 지적했듯이 jQuery와 같은 프레임 워크를 사용할 수 있다면 가장 좋은 방법은이를 사용하는 것입니다. 프레임 워크를 사용할 수없는 경우 DOM을 조작하는 것이이를 수행하는 가장 좋은 방법이라고 생각합니다 (제 생각에는이를 수행하는 올바른 방법).

— Leandro López
소스

0

이것은 내가 원하는대로 img 태그의 루프 또는 단일 태그를 만들기 위해 따르는 방법입니다.

method1 :
    let pics=document.getElementById("pics-thumbs");
            let divholder=document.createDocumentFragment();
            for(let i=1;i<73;i++)
            {
                let img=document.createElement("img");
                img.class="img-responsive";
                img.src=`images/fun${i}.jpg`;
                divholder.appendChild(img);
            }
            pics.appendChild(divholder);

또는

method2: 
let pics = document.getElementById("pics-thumbs"),
  imgArr = [];
for (let i = 1; i < 73; i++) {

  imgArr.push(`<img class="img-responsive" src="images/fun${i}.jpg">`);
}
pics.innerHTML = imgArr.join('<br>')
<div id="pics-thumbs"></div>

— Gvs Akhil
소스