8

パーセンテージを示すテキストを含むjavascript（またはjquery）プログレスバーを作成する方法に関する適切な情報を見つけるのに問題があります。

プラグインは必要ありません。必要なものに適応できるように、プラグインがどのように機能するかを知りたいだけです。どのように画像をプリロードし、プリロードされる画像の数の変数を取得しますか。また、すでにロードされている画像の数に基づいて、html / cssを変更したり、関数を呼び出したりするにはどうすればよいですか？

4

2 に答える 2

7

<img>要素にはonload、画像が完全に読み込まれると発生するイベントがあります。したがって、jsでは、このイベントを使用して、読み込まれた画像の数と残りの画像の数を追跡できます。

画像には、画像の読み込みに失敗した場合、またはダウンロードが中止された場合（ユーザーが「x」ボタンを押した場合）に発生する対応するイベントもありonerrorます。また、画像の読み込みを適切に追跡するためonabortに、イベントとともにそれらを追跡する必要があります。onload

追加の回答：

純粋なjsの簡単な例：

var img_to_load = [ '/img/1.jpg', '/img/2.jpg' ];
var loaded_images = 0;

for (var i=0; i<img_to_load.length; i++) {
    var img = document.createElement('img');
    img.src = img_to_load[i];
    img.style.display = 'hidden'; // don't display preloaded images
    img.onload = function () {
        loaded_images ++;
        if (loaded_images == img_to_load.length) {
            alert('done loading images');
        }
        else {
            alert((100*loaded_images/img_to_load.length) + '% loaded');
        }
    }
    document.body.appendChild(img);
}

上記の例では、onerrorまたはonabort明確にするために処理していませんが、実際のコードでもそれらを処理する必要があります。

于 2013-03-12T06:48:49.787 に答える
3

以下のものを使用するのはどうですか？

$('#btnUpload').click(function() {
    var bar = document.getElementById('progBar'),
        fallback = document.getElementById('downloadProgress'),
        loaded = 0;

    var load = function() {
        loaded += 1;
        bar.value = loaded;

        /* The below will be visible if the progress tag is not supported */
        $(fallback).empty().append("HTML5 progress tag not supported: ");
        $('#progUpdate').empty().append(loaded + "% loaded");

        if (loaded == 100) {
            clearInterval(beginLoad);
            $('#progUpdate').empty().append("Upload Complete");
            console.log('Load was performed.');
        }
    };

    var beginLoad = setInterval(function() {
        load();
    }, 50);

});

JSFIDDLE

HTML5の進行状況要素を試してみることもできます。

<section>
<p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>

<script>
var progressBar = document.getElementById('p');

function updateProgress(newValue) {
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent = newValue;
} </script>
</section>

http://www.html5tutorial.info/html5-progress.php

于 2013-03-12T06:38:42.550 に答える