CODEWITHSUNDEEP
javascriptjqueryhtmlcssjsp
AKIWEB
AKIWEB

Reputation: 19612

How to use image from the local folder instead of using it from the url in jquery?

I am reloading the div every 30 seconds without reloading the whole page and also the user can see loading image when the refresh is happening meaning once the refresh starts it will gray the background and show the loading image and everything is working fine.

Below is the image I am using which is on this url -http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif

enter image description here

<script>
$(document).ready(function(){
    // Create overlay and append to body:
    $('<div id="overlay"/>').css({
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: $(window).height() + 'px',
        opacity:0.4, 
        background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
    }).hide().appendTo('body');

    // Execute refresh with interval:
    setInterval(refresh, 30 * 1000);
});
</script>

<script>
//Create a refresh function:
function refresh(){
    // SHOW overlay
    $('#overlay').show();
    // Retrieve data:
    $.ajax({
        url: 'dataInfo.jsp',
        type: 'GET',
        success: function(data){
            // onSuccess take only the container content
            var content =  $($.parseHTML(data)).filter(".container"); 
            //Replace content inside the div
            $('.container').replaceWith(content);
            // HIDE the overlay:
            $('#overlay').hide();
        }
    });
}
</script>

And below is my div which I am reloading every 30 seconds - 

    <div class="container">
        <!-- some table here -->
    </div>

Now everything is working fine. The only issue is when I will deploy this code in production, it will not work since I am using the image url as it is http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif which will get blocked in production because of firewall issue.

So to avoid this issue, I have downloaded the image locally in my webapp/resources/img folder in my project and now I am not sure how should I modify my code in such a way so that I can use the image from my local directory instead of using it from the URL directly?

I know I need to use img tag but how do I modify my code accordingly?

Any example will be appreciated on this.

Upvotes: 0

Views: 517

Answers (1)

user692168
user692168

Reputation:

Just replace http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif with an absolute url. Change it to webapp/resources/img/page-loader.gif. Or you can put the file in the same directory as your page and simple use page-loader.gif, which is a relative url.

Upvotes: 1

Related Questions