CODEWITHSUNDEEP
ajaxdocument-ready
Ryan
Ryan

Reputation: 14649

Jquery, ajax, load, ready

$(function(){    
       $(document).ready(function() {  
    $('#demo_content').html('<img src="http://v.com/ajax-loader-1.gif"alt="Wait" />');

        $('#demo_content').load('http://vbizmarketing.com/myphp.php?nice=9176198');
        return false;
        cache:false

    });
});

This works wonders, and I am gratefull for the stackover flow community helping me with the original problem, But I have been trying to call the

$('#demo_content').html('IMAGE HERE');

in a separate div so that I can have the loading image be centered and not be placed into the left aligned text that I am actually pulling from another file.

Any suggestions or advice is much appreciated.

Thank you

Upvotes: 0

Views: 826

Answers (3)

Bosworth99
Bosworth99

Reputation: 4234

I'm kind of unclear what you're trying to accomplish / having problems with. But in a scenario like this - I've done the following:

function loadImage()
{
    $('div#container')
        .html(  "<img class='spinner' src='" + ajax spinner path + "'/>"  )
        .fadeIn();

    var newImg = new Image();
    $(newImg)
        .load( function()
            {
                $('div#container')
                    .stop()
                    .css({
                        'opacity'   :'1.0'
                    })
                    .html(newImg);

                $(this)
                    .hide()
                    .fadeIn();
            }
         )
        .attr(  'src'   , ' new image path here ' )
        .error( function()
            {
                $('div#container')
                .html( "<img src='" + loadFailUrl+ "'/>" )
            }
        );
}

So - first append the container div with .html. This will be the path to the loading graphic.

The second portion of the function creates a new Image element, attaches a load event, and an error event. Appending the src .attr defines the src path, and initiates the load.

The load event has an anonymous callback function included, which calls stop on the current fadeIn() animation, if its running, and appends the html with the newly created image (at the same time removing the loading graphic).

Finally, the image gets a fadeIn() sequence.

There's only about 17,233 ways of doing this. I've successfully used this in the past...

cheers!

Upvotes: 1

Ryan
Ryan

Reputation: 14649

$("#div").ajaxStop(function(){  
    $(this).hide();  
});

This function hides the loading bar once the content is loaded Thanks for all the advice.

Upvotes: 0

Mark Coleman
Mark Coleman

Reputation: 40863

Do you mean just a css rule to center the image?

in a separate div so that I can have the loading image be centered and not be placed into the left aligned text that I am actually pulling from another file.

You can do it with some css and a call back on the .load()

The css:

#loading{
    text-align:center;
    display:none;
}

Markup:

<div id="demo_content">
    <div id="loading">
        <img src="http://vbizmarketing.com/ajax-loader-1.gif"alt="Wait" />
    </div>
    <div id="content"></div>
</div>

The script.

$(function() {
    $("#loading").show(); //show the loading div.

    $('#content').load('http://vbizmarketing.com/myphp.php?nice=9176198', function() {
        $("#loading").hide(); //use the callback function for the load method to hide the loading div
    });
});

Code example on jsfiddle.

Upvotes: 2

Related Questions