freefuntimes今回はJavaScriptを用いて、ページを読み込んでいるときに要素が拡大縮小を繰り返し・点滅するローディング画面を実装してみる。実装の前に伝えておきたいことがある。個人的にはローディング画面は好きではない。いうと、ページを読む気にならなくなるからである。ページを読み込んで何秒も待たされるのは正直ストレスが溜まる。読む側としては一刻も早く読みたいのである。画像の読み込みが重たいようなページに対しては、有効な手段なのかもしれないが、今後は5gなどで通信速度も速くなっていくことになると思うので、ローディング画面の需要は無くなるかもしれない。面白い視点でローディング画面からの導入をしているようなページもあるので、一概には言えない。目的を考えて実装するかを判断するのがいいかと思う。デモはこちらdemoそれでは解説に入っていく。src="style.js"></script></body></html>ページの中身を表示させるために、menu1〜menu5を仮テキストで入れている。ローディング画面に関係する記述は下記にあたる。class="bl_loadingText">loading...</div></div>JavaScript側で読み込ませるために、id(任意の名前でOK)を設定し、表示するテキストは、「loading...」とした。10px;}ローディング画面は、読み込まれているときは中のページが見えないよう全画面が背景色や画像で覆われていることが多い。ローディング画面が表示されているときは、縦や横にスクロールしても表示が変わらないため、要素を固定することが求められる。これらのことを考えて、ローディング画面が表示されている時のCSSを割り当てていく。0.3s;}positionをfixedにすることで位置を固定して、幅と高さを100%にして全画面いっぱいに表示させる。あとは中のloading...が上下左右中央に配置されるようdisplayをflexにして、justify-contentとalign-itemsをcenterにして調整した。opacity以下については、JavaScriptとの兼ね合いで、ローディング画面が表示されている状況を記述している。hidden;}JavaScript側でローディング後にloadedのクラスがつくように設定しているため、その時に要素を透過させるために適用している。infinite;}keyframesでanimationの内容を設定し、実行するときは該当のクラスに対して、keyframesでつけたloading(任意の名前でOK)を引っ張ってくるだけでよい。5000);まずやりたいこととしては、ページを読み込んでいるときはローディング画面を表示した状態にしておきたい。コンテンツの内容によっては、ページの読み込みに時間がかかることも想定されるため、ある程度の時間が経ったら完全にページが読み込まれていない状況でも強制的にローディング画面が終わるように設定する。今回は何度も同じ関数を宣言するのが手間なので、適当な関数を定義してから行うことにしたい。loadingID.classList.add("loaded");}ここでloadedPage(任意の名前でOK)の関数を定義している。idをhtmlにつけたのは、ここで呼び出すために使用したかったからである。ここでは、js_loadingに対して、loadedのクラスが追加されるという設定になっている。これでloadedPageをいつでも呼び出すことができるようになる。5000);loadというのは、ページが完全に読み込みが終わってからといった意味になるので、実際に実行されるのはコンテンツの中身が完全に表示されてから実行されることになる。setTimeoutは何秒後に処理をするのかを決めることができるため、今回はページが読み込まれてから2秒後に、htmlのjs_loadingに対して、loadedのクラスが追加されるという設定になる。5000);の記述をした。これで実装完了になる。次は別のローディング画面のパターンも紹介していけたらと思う。続いて、ページを読み込んだときに、modalWindowにactiveのクラスが付与されるように対応する。これは、過去のローディング画面を実装するときの記事で紹介しているので、こちらの記事を参考にしてみてほしい。[...]コメントはクローズされています。(2)人気ブログランキングこのサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。