ローディングGIFを自作して設置した
サイトにアクセスしたときに処理待ちの間にアニメーションを流す処理「ローディングアニメーションを追加しました。
時々サイト読み込み中にこんなのが出るやつです。
自作したローディングアニメーションは簡単なGIF画像です。
参考にしたサイト
こちらのサイトの最下部にサンプルソースがあったのでこれを参考にしました。
参照:http://ysklog.net/jquery/2120.html
GIFアニメを作った後でCSSとjavaScriptを別ファイルで作り呼び出す形で設置しました。
今回作ってるのがGoogleのパロディサイト的なトップページデザインでローディングアニメが終わってからフワッと同じ位置にロゴを出したかったのでCSSの設定で苦労しました。
ページにスタイルとスクリプトを一括で書いてしまうなら簡単で良いですが、前回「header」や「footer」を別けてしまったのもあってローディングアニメーションとロゴ画像の位置をぴったり合わせることが出来なかったので今後の課題です。
きっちりCSS(スタイルシート)を入れてあげれば揃うんだろうな・・・
出来上がったのがこちらです。
軽いページの移換してスクショを取ったのであんまりわかりずらいですが上下が若干(数px)ずれてしまってます。
こういう仕様です。と言ってしまえば通りそうですけど意図に反してズレてるのでもろ私のスキル不足です(笑)