昔のWEBサイトだとフレームを使用したページがあると思います。外部(一般)向けのページは、デザイナーに頼んできれいなサイトになっているけど、内部の管理ページなどは、最初に作った時のままってことありますよね。そんなフレーム分割されたページでも使い勝手を向上させるために、リンククリックでローディング画像を表示する方法を調べてみました。以下のようなframesetタグで作られたページを想定しています。name="contents"></frame></frameset>よくある左右に分割した画面です。left.html(左フレーム)にあるリンクをクリックすると、main.htmlのフレーム(右フレーム)がリンク先画面で置き換わります。リンク先が重いページの場合、反応が無いのでリンクを押せたかどうか不安になります。そこでリンクをクリックしたらローディング画像が表示されて、リンク先ページの読み込みが完了したらローディング画像が消えるようにします。理想としては、フレーム全体にオーバーレイするか、右フレームにオーバーレイするように表示したいところですが、やり方がわからなかったので、今回は左フレームに表示させます。それでは作成に入ります。jQueryとCSS(とHTML)を使います。プラグインは使用しません。ローディング画像は以下で作成したものを使います。背景色やサイズも指定できるので便利ですね。loaderまずはHTMLです。jQueryの読み込みと、JavaScriptの記述、リンク先を表示するフレームの指定を行います。Loading...</div>jsファイル、ローディング画像は、HTMLファイルと同じディレクトリに配置しています。HTMLファイルに直接記述しても、cssファイルを分けてもどちらでも大丈夫だと思います。background-color等は、環境に合わせて修正してください。background-color:#fff;}cssファイルは、css用ディレクトリに配置しています。最後にjQueryで使用するclass名(link)を、aタグのclass属性に設定します。リンク先のパスは何でも構いません。framesetタグは、HTML5で廃止されたようなので使う機会は少ないと思いますが、簡単なサンプルが無かったので書きました。最初、別のframeタグの内容を取得する方法を知って、リンク元の画面は遷移しないから、JavaScriptを操作すれば出来そうと思って書いたのですが、画面が実際に遷移するのは、clickイベント終了後にブラウザに制御が渡った後なんですね。JavaScriptで書き換えた瞬間に変わっていると勘違いしていました。動作の確認もやりにくかったです。修正版は、frameタグとは関係なくなってしまいました。最初は、JavaScript内でもアクセスして、ブラウザでもアクセスするので、待ち時間が2倍になってしまって、ローディング画像を表示していも本末転倒かなと思ったのですが、JavaScript(jQuery)でのアクセスは、非同期で行うので時間は問題ないという結論になったので、公開します。JavaScriptは、やはり奥が深いです。XAMLでない方のビルド定義の作成・実行を1から解説...前回からあっという間に2か月以上たってしまった。チェックボックスのカスタマイズをCSSのみで行う。(1)注目記事はてなブログをはじめよう!redwarriorさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。