2

テキスト、写真、その他のコンテンツを表示する前に、ウェブページのすべての写真を読み込むローダーをウェブサイトに持っています。style="width:0;height:0;visibility:hidden;"そのため、ページ内のすべての画像（およびそれらを非表示にするためのその他のもの）とともに、背景、メインラッパー（デザイン付き）などのコードを配置しました。それで私は言って何かを入れます Loading.......

HTML:

<body onLoad="load()">
<div class="main-wrapper" id="main-wrapper">
     <p>Loading.....</p>
</div>
<img src="xxxxx" class="hidden">
<img src="xxxxx" class="hidden">
<img src="xxxxx" class="hidden">
<img src="xxxxx" class="hidden">

Javascript:

function load()
{
document.getElementById('main-wrapper').innerHTML = "Text I Want <img src="x"";>
}

これにより、すべての画像が読み込まれたときに表示したいテキストが作成されました。これで、必要なコンテンツを .innerHTML=""; に書くのに問題はなくなりました。

任意のコーディング言語を使用してロードされた割合もわかるようにする方法を教えてください. それを行うためのより良い方法があるかどうかも教えてください。ただし、負荷の割合を伝えながら.

4

1 に答える 1

1

画像の数を数え、画像のサイズを考慮しないという単純な解決策は、次のようになります（単純な例...）：

function loadPage(html) {
  // html contains the html to add to #main-wrapper

  // put the html in an element to count the images in it
  var el = $("<div>").html(html);
  var imgCount = el.find("img").length;
  var count = 0;
  var percentage = 0;

  $("img", el).load(function() {
    count++;
    if (imgCount === count) {
      $("#main-wrapper").html(html);
    } else {
      percentage = (count / imgCount) * 100;
      $("#main-wrapper").html("loading ("+ percentage + "%) ...");
    }
  });
}

ロードする前に画像サイズを取得するのは困難です。私は最近それを試していませんが、Firefoxでサイズを取得するのは簡単でしたが、たとえばWebkitでサイズを取得することは不可能でした。

于 2013-02-09T15:06:03.233 に答える