0

我正在使用“背景：#BDBDBD url(image.png) top left no-repeat”这个css属性用于两个设置了宽度和高度的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