javascript - Jquery在页面上加载特定时间的图像

Question

我有一个 Div，其中有一个图像加载器图像。我想在调用价格计算函数后在 div 中显示该图像，该图像应该显示在整个页面上。请帮助我

<div class="Progress_Layout" style="display:none">
    <div class="Progress_Content">
        <div>
            <img src="@Url.FilePath(FileTypes.IMAGES, "loader", "10271456A2B3")" style="vertical-align: middle" alt="" />
        </div>
        <div class="Progress_Text">
            @DffUtility.GetGlobalResource("pleaseWait")
        </div>
    </div>
</div>

这是计算价格时调用的 Jquery 函数。

function CalculatePrice() {
  var req, parameters, datasend, prodlist;

  LOADING = setInterval(function () {
    $('.objprice', prodlist).html(LOADINGIMG);
  }, 5);

  LOADING = setInterval(function () {
    $("body").html($(".Progress_Layout"));
  }, 5);

  var querystring = "?" + BASIC_PARA + "&" + GetPriceCalculationQueryString() + "&filter=" + FILTER + "&sort=1&FilterChange=0&cacheprod=0";
  if (PAGE_TYPE < 3) {
    querystring = querystring + "&dumy=1",
      datasend = "";
  } else {
    req = {
      RefID: REFIDLIST
    };
    datasend = JSON.stringify(req);
    datasend = encodeURIComponent(datasend);
  }

  URL_QUERYSTRING = querystring;
  UpdateLabels();
  Searchcontrol(2);

  if (ISREFID == "" && LANDWITHPRICE == false) {
    smoothScroll('prodlistinsp', 300);
  }

  parameters = "prodrq=" + datasend;

  if (document.domain.indexOf("localhost") != -1 || document.domain.indexOf("tenbook") != -1) {
    makeRequest(TENWEB_PATH + "/inspiration/PriceCalculatorPage.aspx" + querystring, parameters);
  } else {
    makeRequest("http://" + document.domain + "/" + PROXYPAGE + querystring, parameters);
  }
}

Answer 1

您可以通过以下结构实现此目的:

HTML:

<div id="loadingImage"></div>
<div id="loadingOverlay"></div>

CSS:

#loadingImage {
    background: url(http://loadinggif.com/images/image-selection/17.gif)
        no-repeat center center;
    height: 64px;
    width: 64px;
    position: fixed;
    z-index: 11111;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -25px;
    display: none;
}

#loadingOverlay {
    display: none;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: fixed;
    z-index: 1; 
    background-color: black;
    opacity: 0.5;
}

JS:在 calculatePrice() 开始时调用 showLoader()，然后在指定的超时时间内调用 hideLoader。

function calculatePrice(){
    showLoader();
    setTimeout(hideLoader, 1000);
}

function showLoader(){
    document.getElementById('loadingImage').style.display = 'block';
    document.getElementById('loadingOverlay').style.display = 'block';
}

function hideLoader(){
    document.getElementById('loadingImage').style.display = 'none';
    document.getElementById('loadingOverlay').style.display = 'none';
}

DEMO