「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メソッドを実行すると、画像が正しく読み込まれます。