Craigy Craigo Craigy Craigo - 1 month ago 8
PHP Question

Is it possible to adapt the following jQuery?

I've recently added to my website, a responsive loading icon while the page loads. Except I would like to show the image whilst a JavaScript function is being executed because if the user runs the script a second time before the first xmlhttp request is finished, it wont work properly.



$(window).load(function() {
$(".se-pre-con").fadeOut("slow");
});

.no-js #loader {
display: none;
}
.js #loader {
display: block;
position: absolute;
left: 100px;
top: 0;
}
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="se-pre-con"></div>





Is there a way of modifying the jQuery to work better for me? or do you guys have a completely different solution that will still solve the problem?

dom dom
Answer

If I am understanding your requirements clearly then I think that You want to add a loading image before your xmlhttp request and when request work complete then it goes off.

first add below code in html file

<div id="loadingDiv">
    <div id="popupContact">

    </div>
</div>

following lines in your css and don't forget to add a bg.png image in your images folder which you want for your loading image

#loadingDiv {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    position: fixed;
    background: url(../images/bg.png) repeat;
    overflow: auto;
    z-index: 100000;
}

div#popupContact {
    position: fixed;
    left: 48%;
    top: 40%;
    background: url(../images/loading.gif) no-repeat;
    width: 100%;
    height: 100%;
    float: left;
}

then add following two methods in your js file

//it will show process image
function showProcessImg(){
    $('#loadingDiv').css('display','block');
}
//it will hide process image
function hideProcessImg(){
    $('#loadingDiv').css('display','none');
}

call to showProcessImg() before your httprequest and call hideProcessImg() in your success or error call back of httprequest as following

showProcessImg();

    $.ajax({
        url:'',
        method:'POST',
        success:function(response){
            hideProcessImg();
        },
        error:function(){
            //disable loading image
            hideProcessImg();
            alert('Error occur here');
        }
    });