BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] img 要素を作成するための最適な JavaScript コードは？

2022-09-23 14:25:48

質問

私は、バックグラウンドで画像要素を作成し、何も表示しない簡単な 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である必要があります。

どのように解決するのですか？ 

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

px はCSSのみです。どちらかを使用してください。 

oImg.width = '1';

を使って、HTMLで幅を設定するか 

oImg.style.width = '1px';

でCSSで設定します。

IE の古いバージョンでは document.createElement() で適切な 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> を挿入し、表示させたくない追跡/プリロード画像をそこに置くことができます。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します