CODEWITHSUNDEEP
javascriptjqueryajax
User_coder
User_coder

Reputation: 516

Loading image disappearing too soon

Pulling external pages into a <div>. I have a loading image while the content populates however it disappears to soon (before the content has loaded) and there is a few seconds gap before content has loaded. Any suggestions?

$(document).ready(function() { 
    var ajax_load = "<img class='loading' src='img/loader_large.gif'/>";
    $("#page_1").click(function(e) {
        e.preventDefault(); 
        $("#content").html(ajax_load).load("page_1.html");
    });
    $("#page_2").click(function(e) {
        e.preventDefault(); 
        $("#content").html(ajax_load).load("page_2.html");
    });
});

Upvotes: 3

Views: 2122

Answers (6)

User_coder
User_coder

Reputation: 516

Thanks for everyones input, learned of some new methods, so thank you. I end up loading from the .js file that loads the instagram data. Works most effective this way and very simple, guess I have been awake too long (over thinking).

Below is an example of how I achieved it:

$.ajax({
dataType:'jsonp',
url:url,    
beforeSend:function(){ $('.loader').html("<img src='img/loader_large.gif'/>");},
complete:function(){ $('.loader').html(""); }
});
};

CSS

 .loader { text-align:center; }

HTML

<div class="loader"></div>

Upvotes: 0

Eric Olson
Eric Olson

Reputation: 2985

You can use jQuery to make your document aware of ajax calls via a separate handler. Then you would only have one place to manage your loading gif and get things appearing and disappearing in the order you want.

Here is a jsfiddle demo.

To use in your example would be something like:

$(document).ready(function() {

    // removed your .html(ajax_load) in these
    $("#page_1").click(function(e) {
        e.preventDefault(); 
        $("#content").load("page_1.html");
    });
    $("#page_2").click(function(e) {
        e.preventDefault(); 
        $("#content").load("page_2.html");
    });

    // handlers for ajax events.
    // just make a hidden container with your loader in it and this will show/hide as necessary
    $(document).ajaxStart(function() {
        $(".ajax-load-container").show();
    }).ajaxComplete(function() {
        $(".ajax-load-container").hide();
    });
});

Upvotes: 3

user1
user1

Reputation: 1065

I would put hidden image into the #content element

    <div id="content"><img class='loading' style="display:none" src='img/loader_large.gif'/></div>

assuming your content is a div

and use ajaxStart and ajaxStop to hide and show it.

     $(document).ajaxStart(function () {
            $('.loading').show();
        });
        $(document).ajaxStop(function () {
            $('.loading').hide();
        });

Upvotes: 0

Kamen Stoykov
Kamen Stoykov

Reputation: 1881

You can't count on counters because everything may happen and the counter may finish too soon. I can't see where exactly you are removing the loading image. I suppose that it should be somewhere in .html files. But as you said there are ajax calls, which will finish after the page have been loaded so there will be a gap, as you said again. If all your ajax calls depend on each other then make them nested and remove the loading from very last one. In this way you will be ensured that all the content is loaded. But it is more likely that these ajax calls are independent. Then you can make counter. Each time when some ajax call is ready you will increment the counter. When the counter is equal to number of your ajax calls then you will remove the loading image.

Upvotes: 0

Mehdi Karamosly
Mehdi Karamosly

Reputation: 5438

try the below and let me know:

$(document).ready(function() { 
//    var ajax_load = "<img class='loading' src='img/loader_large.gif'/>";
        var img = new Image();
        img.className = 'loading';
        img='img/loader_large.gif';
    img.onload = function(){
      $("#page_1").click(function(e) {
        e.preventDefault(); 

       // $("#content").html(ajax_load).load("page_1.html");
        $("#content").append(img).load("page_1.html");
      });
      $("#page_2").click(function(e) {
        e.preventDefault(); 
       // $("#content").html(ajax_load).load("page_2.html");
        $("#content").append(img).load("page_2.html");
      });
    }
});

Upvotes: 0

qJake
qJake

Reputation: 17139

Could you load the content into a hidden div and then replace #content with it?

Something like this:

$(function()
{ 
    var ajax_load = "<img class='loading' src='img/loader_large.gif'/>";

    $("#page_1").click(function(e)
    {
        e.preventDefault(); 
        $("#content").html(ajax_load);
        var content = $('<div />').load("page_1.html");
        $('#content').html(content.html());
    });

    $("#page_2").click(function(e)
    {
        e.preventDefault(); 
        $("#content").html(ajax_load);
        var content = $('<div />').load("page_2.html");
        $('#content').html(content.html());
    });
});

Upvotes: -1

Related Questions