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

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

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

  2. JavaScript

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

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

  3. JavaScript

    WebアプリのデバッグをChromeでやるために「touch events」を有効化する方法

    Webアプリのデバッグは「Chrome」をいつも使ってます。その…

  4. JavaScript

    「offset」と「style」で取得する値が違う

    ちょっとはまったのでメモ。以下のように「offset」と「sty…

  5. JavaScript

    【TweenMax.js】アニメーション終わりに関数を呼び出す!

    最近はWebアプリでアニメーションが必要になったときに、「Twen…

最近の記事

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

アーカイブ

  1. 映画

    「トゥルーへの手紙」を観賞
  2. 日常

    自宅で寝袋
  3. 日常

    いきたいショップ
  4. IKEA

    【IKEA】ざっくり片付けられるBOXが3つも!IKEAの収納「SKUBB ボッ…
  5. 読書

    【絵本】じつはシリーズ化していた『どろんこハリー』
PAGE TOP