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

我有一个具有图像加载器图像的Div。一旦我打电话给价格计算功能，我想在div中显示该图像，图像应显示在整个页面上。请帮我Jquery在页面上加载图像特定时间

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

来源

2015-10-16 Passionate Programmer

所以要在调用CalculatePrice显示与覆盖装载机图像和隐藏一旦完成过程，对吧？ –

是的普拉卡什你是对的。 –

从哪里打电话给你的计算方法？是否需要足够的时间才能使用装载机？ –

您可以通过以下结构实现这一点：

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

来源

2015-10-16 06:23:05

@激情程序员，你想要什么？ –

是的普拉卡什非常感谢你。 –

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

回答

相关问题