2

HTMLで次のように宣言された画像があります。

<img src="images/image_01.gif" id="man_img_file" width="400" height="300" alt="image_01" />

jQueryを使用して画像を変更しています：

$('#man_img_file').attr('src', "images/image_02.gif");

ここで、画像が読み込まれている間（つまり、新しいsrc画像がjQueryを介して読み込まれている間）に進行状況バーのパーセンテージを表示したいと思います。これはどのように達成できますか？jQueryプログレスバーを使用して実行できますか？

注：画像はすでにサーバーにあり、ロードする前にPHPスクリプトを使用して画像サイズを取得できます。

4

2 に答える 2

5

Javascriptを使用するだけで、ロードされた画像の量を判断する方法がわからないため、プログレスバーを追加できない場合があります。

ただし、Imageオブジェクトを使用して、新しい画像の読み込み中に回転する「読み込み中」のgifを表示することはできます。

function LoadNewImage(target, url) {
    var newImage = new Image();

    // some overlay div
    loadingOverlay.show();

    newImage.src = url;

    newImage.onload = function() {
        // image is loaded into browser memory, so will display instantly
        target.attr('src', url);

        // hide the overlay again
        loadingOverlay.hide();
    }
}

役立つ可能性のあるリンクは次のとおりです。

javascriptで画像をプリロードする

ローディングオーバーレイを表示する

于 2012-10-16T00:09:08.543 に答える
0

共有してくれたローレンスに感謝します。

  1. jQueryで'src'属性を変更している間、ロードされたバイト数をその場でチェックすることはできません（javascriptを使用）。
  2. ただし、画像の読み込み中は、読み込み中のメッセージ/画像を表示することができます。（解決策については、上記のローレンスの回答を確認してください）
  3. ローレンスが言うように、「HTML5とIE9を超えるものに満足している場合は、XHRを使用してこれを行うことができます：http：//blogs.adobe.com/webplatform/2012/01/13/html5-image-progress-events /（ここのサンプルを参照してください：http：//blogs.adobe.com/webplatform/files/XHRProgressSample.html？file = XHRProgressSample.html） "
于 2012-10-17T19:32:52.647 に答える