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. obj_clear.jpg

    JavaScript

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

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

  2. js_global.jpg

    JavaScript

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

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

  3. 20120716134815

    JavaScript

    正規表現で入力されたテキストが有効かをチェックする

    テキストボックスに入力されたテキストが整数かどうかをチェックします…

  4. chrome_touchevents.jpg

    JavaScript

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

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

  5. tweenmax_license01.jpg

    JavaScript

    「TweenMax.js」をビジネス利用のためのライセンス購入方法

    いつもJavaScriptのアニメーション部分でお世話になってる「…

  6. scope.jpg

    JavaScript

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

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

アーカイブ

  1. js_comment.jpg

    JavaScript

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

    「ニッポンのデザイナー展」ギャラリートーク1
  3. ypad2_use-1.jpg

    プロダクト

    全体を把握できるプロジェクト管理用ノート『yPad2』を3ヶ月くらい使ってみたら…
  4. look_creamsoda1.PNG

    グルメ

    ジャケ買いした冷やし系チョコ「LOOK クリームソーダ」がパチパチする新食感だっ…
  5. 日常

    こ・こ・で
PAGE TOP