0

このリンクで探していたものが見つかりました ページの読み込み中に ajax の読み込み gif アニメーションを表示する方法は? しかし、これを自分のウェブサイトに実装する方法がわかりません。

ページが読み込まれている間、読み込み中の GIFが表示され、ページが PHP の結果で完全に読み込まれると、自動的に消えます。

Web サイトでは、1 つのページ テンプレート (index.php) を使用し、ユーザーのクエリに従って、そのページにすべてのデータを動的にロードします。

前もって感謝します。

4

3 に答える 3

2

必要なものはすべてここにあります

http://mycodeprograms.blogspot.ca/2012/10/how-to-add-loader-while-page-load.html
于 2013-01-29T17:21:00.527 に答える
2

さて、これが私の解決策です。

1)CSS部分

#loadgif {
    padding-top:2px;
    font: 10px #000;
    text-align:center;
    vertical-align:text-top;

    height: 80px;
    width: 130px;

    /* Centering the div to fit any screen resolution */
    top: 50%;
    left: 50%;
    margin-top: -41px; /* Div height divided by 2 including top padding */
    margin-left: -65px; /* Div width divided by 2 */
    position: absolute;
    display:    none; /* JS will change it to block display */
    position:   fixed;
    z-index:    1000;

    /* Loading GIF set as background of the div */
    background: #FFF url('../img/loader.gif') 50% 75% no-repeat;

    /* Misc decoration */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:#7580a8 solid 1px;
}

2) HTML 部分

body タグ内の任意の場所に div タグを配置します。

<!-- With or without text -->
<div id="loadgif">Loading...</div>

3) Javascript 部分

div を表示する関数と非表示にする関数の 2 つの関数を作成しました。

<script type="text/javascript">

// Hide function by changing <div> style display attribute back to none
function hideloadgif() {
    document.getElementById('loadgif').style.display = 'none';
}

// Show function by changing <div> style display attribute from none to block.
function showloadgif() {
    document.getElementById('loadgif').style.display = 'block';
}

// Making sure that any other event running in the background isn't affected
if (window.addEventListener) { // Mozilla, Netscape, Firefox
    window.addEventListener('load', WindowLoad, false);
} else if (window.attachEvent) { // IE
    window.attachEvent('onload', WindowLoad);
}

// Call the hideloadgif() function on click event,
// with interval time set to 3 seconds to hide the <div>
function WindowLoad(click) {
    setInterval("hideloadgif()",3000)
}
</script>

4) div を表示します。どこでも onlick="" イベントを使用して関数 showloadgif() を呼び出します。

例えば

<img src="abc/def.jpg" onlick="showloadgif()">

画像をクリックすると、div が表示され、同時に hideloadgif() がトリガーされ、3 秒以内に div が非表示になります。

function WindowLoad(click) {
    setInterval("hideloadgif()",3000)
}
于 2013-01-30T17:51:09.617 に答える
2

ページが完全に読み込まれると、最初に<body>のonloadイベントが発生します。ここで画像を非表示にします。

たとえば、<body>タグを次のようにします。

<body onload="makeLoadingGifDisappear()">

ページ本文のどこかで、GIF に ID を指定します。

<img src="loadinggif.gif" id="myLoadingGif">

次に、ページの JavaScript で、makeLoadingGifDisappear関数で GIF を非表示にします。

function makeLoadingGifDisappear() {
 document.getElementById('myLoadingGif').style.display = 'none';
}
于 2013-01-29T17:57:09.107 に答える