118

バックグラウンドで画像要素を作成し、何も表示しない単純な JS コードを作成したいと考えています。image 要素はトラッキング 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 である必要があります。

4

11 に答える 11

92 
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>、本文の最初の子として絶対位置のページ外を挿入し、そこに表示したくない追跡/プリロード画像を配置します。 .

于 2008-10-22T18:49:56.230 に答える
54 
var img = new Image(1,1); // width, height values are optional params 
img.src = 'http://www.testtrackinglink.com';
于 2008-10-22T17:58:11.530 に答える
24 
var img = document.createElement('img');
img.src = 'my_image.jpg';
document.getElementById('container').appendChild(img);
于 2008-10-22T18:08:15.363 に答える
10

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"
}));
于 2008-10-22T18:12:30.863 に答える
9

完全を期すために、InnerHTMLの方法も使用することをお勧めします-私はそれを最良の方法とは呼びませんが...

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

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

于 2008-10-23T15:08:37.473 に答える
5

最短の方法:

(new Image()).src = "http:/track.me/image.gif";
于 2008-10-23T11:04:49.260 に答える
3

フレームワークの使用は許可されていますか? jQueryとPrototypeを使用すると、この種の作業が非常に簡単になります。プロトタイプのサンプルは次のとおりです。

var elem = new Element('img', { 'class': 'foo', src: 'pic.jpg', alt: 'alternate text' });
$(document).insert(elem);
于 2008-10-22T17:53:50.633 に答える
3

あなたは簡単に行うことができます：

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

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

単純 ：）

于 2011-10-15T08:16:58.287 に答える
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>
于 2016-10-22T12:17:37.430 に答える
0

他の人が指摘したように、jQuery のようなフレームワークの使用が許可されている場合、最善の方法はそれを使用することです。フレームワークの使用が許可されていない場合は、DOM を操作するのが最善の方法だと思います (私の意見では、正しい方法です)。

于 2008-10-23T11:14:26.383 に答える