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である必要があります。

javascript dhtml

— ピート
ソース

2

「最高」を定義します。最速？最も簡単ですか？

— Andrew Hedges

1

@steveniseki 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>れたページ外を本文の最初の子として挿入し、表示したくないトラッキング/プリロード画像をそこに配置します。

— ボビンス
ソース

4

new Image()すべての状況で最適に機能しないでしょうか？

— Alexis Wilke

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ラインの各ペア間で使用すると、どのラインがフリーズしているかが正確にわかります。

— ロドリゴ

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を使用します。私はこれを取得しません：/

— aexl

7

完全を期すために、私はInnerHTMLの方法も使用することをお勧めします-最善の方法とは言いませんが...

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

ちなみに、innerHTMLはそれほど悪くありません

— ビニーVA
ソース

2

50x50グリッドの画像にこの方法を使用していました。上記の追加方法を試したところ、実行時間が150ミリ秒から2250ミリ秒にジャンプしました。したがって、innerHTMLの方がはるかに効率的だと思います。

— ニコラス

4

最短の方法：

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

— エムケイ
ソース

2

ドキュメントに追加されていない場合、画像のsrcがまったくフェッチされるかどうかは確実ではありません（ブラウザ依存）。

— 2008年

1

DOMに接続されていない場合、ブラウザがその画像を取得しないケースはありますか？

— antoine129

2

私はこれをIE、FF、Chrome、Safariでテストしました。すべてDOMに追加せずに画像をロードします。これは古いブラウザの問題ですか？

— Seanonymous

3

フレームワークの使用は許可されていますか？jQueryとPrototypeは、この種のことをかなり簡単にします。これがプロトタイプのサンプルです：

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

— スウィリアムズ
ソース

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を操作するのが最善の方法だと思います（私の意見では、正しい方法です）。

— レアンドロ・ロペス
ソース

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
ソース