0

「background:#BDBDBD url(image.png)top left no-repeat」を使用しています。このcssプロパティは、幅と高さが設定されている2つのdiv要素に使用されます。ボタンをクリックすると、setInterval()を使用して関数を継続的に実行することにより、ネストされた両方のdivの幅を動的に変更します。画像はChromeで読み込まれていませんが、FirefoxとIEでは正常に機能します。多くの検索では、Chromeで背景画像を使用しても機能しないことがわかりますが、これらのソリューションはいずれも機能しないようです。

<div id="boxes">
          <div id="dialog" class="window" style="overflow: auto">

              <div id="progressBar" class="meter-wrap" style="display: block;position: relative; margin: auto;">
                 <div class="meter-value" style="background-color: #05C; width: 40%">
                    <div class="meter-text">
                       Loading... 
                     </div>
                 </div>
              </div>
              <div class="meter-text-message">
                        Loading...
              </div>
  </div>

CSS:

.meter-wrap, .meter-value, .meter-text {
        width: 155px; height: 30px;
}

.meter-wrap, .meter-value {
    background: #bdbdbd url('/sf-images/tracker/inline_progress_bar.png') top left no-repeat;
}

jsコード:

function setProgressBar() {
    var pgBar = jQuery("#progressBar");
    pgBar.show();
    running = true;
    var inter = null;

    function run() {
        pgBar.find(".meter-value").css("width", progress + "%");
        pgBar.find(".meter-text").text(progress + "%");
        if (progress == 100) {
            jQuery(".meter-text-message").html("Complete");
            clearInterval(inter);
            running = false;
        }
    }
    inter = setInterval(run, 50);
}

画像が初めて読み込まれないことがわかったので、別の方法でdiv要素を画像を背景として表示しました。その後、上記のjsメソッドを実行すると、画像が正しく読み込まれます。

4

0 に答える 0