戻る

ページのローディング中表示

ローディングアイコンを表示することによりユーザビリティを期待する方法

ホームページを表示したと仮定します。
画像や他の処理により、ページのすべてが表示されるまで
一定の時間を超えるとユーザーレスポンシビリティが良くないと判断されます。
例えば、
画像などを表示する場合、
画像の大きさや枚数を減らすなどの調整をすることで改善を期待できますが、
”現在、表示中です...”というメッセージを
ページの表示が終わるまでユーザーに通知する方法があります。

例えば、ローディングアイコン(くるくる回る画像)と表示中を知らせるメッセージを
ページ表示中にユーザーにわかりやすいように表示する方法です。

[サンプル]
<style> .w1{ position: fixed; z-index:1; } .w2{ position: fixed; height:30px; z-index:1; } </style> <div id="waiting"> <div class="w1" id="loading"> <img src="loading.gif" style="width:100px;height:100px;"> </div> <div class="w2" id="msg"> please wait a moment ... </div> </div> <script> let width = window.innerWidth; let height = window.innerHeight; let x = (width - 100) / 2; let y = (height - (100 + 30)) / 2; const loading = document.getElementById("loading"); loading.style.left = x +'px'; loading.style.top = y +'px'; const msg = document.getElementById("msg"); const computedStyle=getComputedStyle(msg); let msgWidth=parseInt(computedStyle.width); x = (width - msgWidth) / 2; y += 100; msg.style.left = x +'px'; msg.style.top = y +'px'; window.onload=function() { const waiting = document.getElementById("waiting"); waiting.style.display="none"; } </script></script>

[CSS]
positionをfixedにすることで、表示中のHTML画面の上(被せるよう)に
ローディングアイコンやメッセージなどを表示させます。
このサンプルでは、z-indexを使用して表示中のHTML要素の上に表示させています。

[divタグ]
(1)ローディングアイコン
(2)メッセージ
を設定しています。
位置調整をするため、divタグにidを設定しています。

[javascript]
画面の幅の取得します。

(1)ローディングアイコン
上記のようにアイコンを表示するためのx座標およびy座標を計算します。

(2)メッセージ
getComputedStyleメソッドとwidthプロパティでブラウザが計算した最終的な幅を取得します。
parseIntとしているのは、pxで値を返すため、他の数値と計算するためint型にキャストしています。

ローディングアイコンは、下記のサイトでダウンロードできます。

「CMAN」さんの画像を使用させていただいております。
ありがとうございます。

[URL]CMAN【フリーアイコン】

URL[https://sozai.cman.jp/][クリックすると開きます])

このサイトの下記URLでローディングアイコンを掲載してくださっています。
色、方向など指定を好きに設定できるので、重宝できるサイトと思います。
[URL]
CMAN【フリーアイコン】 くるくる回る



戻る

back

display loading page

how to expect usability using display loading icon

Let's say you're viewing a homepage.
If it takes longer than a certain amount of time for the entire page to display due to images and other processing, it is considered to be poor user responsiveness.
example,
When displaying images, etc.,
you can improve the experience by reducing the size or number of images, but
there is also a way to notify users by displaying a "Currently displaying..." message
until the page finishes loading.

For example, you can display a loading icon (a spinning image) and a message informing users that the page is loading.
This is a way to clearly display a loading icon (a spinning image) and a message informing users that the page is loading.
This is a way to clearly display a loading icon (a spinning image) and a message informing users that the page is loading while the page is loading.

[Sample]
<style> .w1{ position: fixed; z-index:1; } .w2{ position: fixed; height:30px; z-index:1; } </style> <div id="waiting"> <div class="w1" id="loading"> <img src="loading.gif" style="width:100px;height:100px;"> </div> <div class="w2" id="msg"> please wait a moment ... </div> </div> <script> let width = window.innerWidth; let height = window.innerHeight; let x = (width - 100) / 2; let y = (height - (100 + 30)) / 2; const loading = document.getElementById("loading"); loading.style.left = x +'px'; loading.style.top = y +'px'; const msg = document.getElementById("msg"); const computedStyle=getComputedStyle(msg); let msgWidth=parseInt(computedStyle.width); x = (width - msgWidth) / 2; y += 100; msg.style.left = x +'px'; msg.style.top = y +'px'; window.onload=function() { const waiting = document.getElementById("waiting"); waiting.style.display="none"; } </script></script>

[CSS]
By setting the position to fixed, you can display a loading icon, message, etc. on top of (overlaying) the currently displayed HTML screen.
In this sample, z-index is used to display them on top of the currently displayed HTML element.

[div tag]
(1) Loading icon
(2) Message
Settings are made.
An id is set for the div tag to adjust the position.

[javascript]
Get the screen width.

(1) Loading icon
Calculate the x and y coordinates for displaying the icon as shown above.

(2) Message
Use the getComputedStyle method and width property to obtain the final width calculated by the browser.
The parseInt method returns a value in pixels, so it is cast to an int type for calculation with other numerical values.

You can download the loading icon from the following website.

We are using images from "CMAN" with permission.
Thank you.

[URL]CMAN【Free Icon】

URL[https://sozai.cman.jp/][Click to open])

This site offers loading icons at the URL below.
You can customize the color, orientation, and other settings to your liking, making this a very useful site.
[URL]
CMAN【Free Icon】 Spin around


back