JavaScript

背景画像をJavaScriptで入れ替える2種類の方法

style_backgroundImage

ものごとには「正解」というものがひとつではない、ってことが多いもんです。
プログラミングでもそれは同じ。

オブジェクトの背景画像を入れ替える方法も複数あります。
jQueryを使ったやり方は簡単で可読性もいいのですが、
実行速度が少し遅いんですよね。

Webアプリをデザインしていると
その遅さが気になってくるところがあります。

例えばボタンの動作が一瞬おくれるとか。。。

速度を気にするのなら
jQueryは使わないほうがいいですよ。

1
2
3
4
5
6
7
8
//jQueryを使った書き方
$('#hoge').css("background-image","url('/img/hoge.png')");
 
//jQueryを使わない速度重視の書き方
//DOM取得 
var objID = document.getElementById('hoge');
//リンクを設定    
objID.style.backgroundImage = "url(img/hoge.png)";

ちなみに
DOMの取得は関数の一番最初のほうでやっておくのがいいです。

DOM取得のやり方は、
背景画像を変えるときだけではなくCSSとか全般の話ですよ♪

▼jQueryって便利ですからね〜、うまく適材適所ということで。

関連記事

  1. JavaScript

    JavaScriptでは「変数のスコープ」を正しく理解してエラーを減らそう!

    変数の「スコープ」は正しく理解しないと、エラーにならないエラーが起…

  2. JavaScript

    配列に入れた無名オブジェクトの値をクリアする

    オブジェクトの値を配列にいれて管理することってけっこうあります。…

  3. JavaScript

    【TweenMax】「onComplete」で引数を使う方法

    TweenMaxの「onComplete」で引数を使いたい場合って…

  4. JavaScript

    JavaScriptでグローバル変数の使いどころを見直してパフォーマンスを改善する

    JavaScriptのコードの中では、どこにデータを格納するかでコ…

  5. JavaScript

    JavaScriptでコメントは「/* */」をなるべく使わないようにしたい

    コメントには囲った部分をすべてコメントにする「/* */」と、1…

  6. JavaScript

    JavaScriptでグローバル変数を減らす方法

    グローバル変数はいいことない!もしかしたら使っているライブラリー…

最近の記事

  1. ホワイトハウスコックスの財布
  2. 進撃の巨人展FINAL チラシ
  3. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  4. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  5. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  6. 【コレクション】カードダス:SDガンダム外伝シリーズ
  7. 懐かしい!!カードダスSD戦国伝!!

アーカイブ

  1. プロダクト

    【F】フライターグ(FREITAG)は修理できます!
  2. 日常

    香港といえば
  3. WordPress

    「WordPressのログイン後に画面が真っ白け」対策
  4. 日常

    「北斎展」
  5. LEGO

    LEGO CUUSOO第4弾「デロリアン」のプロダクトモデルがちらり!
PAGE TOP