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

Jquery Loading image on Page for specific Time

本文关键字：定时间 加载 图像 Jquery      更新时间：2023-09-26

我有一个div，它有一个Image Loader图像。我想在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);
  }
}

可以通过以下结构实现:

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';
}

相关文章：