CODEWITHSUNDEEP
jqueryasp.net-mvc
Codehelp
Codehelp

Reputation: 4747

Page load events in MVC and jQuery?

is there a way to do some activity while a webpage is loading? What I am trying to find out is, in a very simplest way, to show an image or a message like 'Loading ...' when the page starts to load and then hide it or make it dissappear once the page loading finishes. The user can the continue with the interaction on the page.

I have read and tried the jQuery way of using document.ready but that gets executed once the document is loaded completely. The same is with the load method.

So if I have a page that takes some time to load completely, is there a page event that get fired when the page starts to load which I can hook-up and an after event when the page is ready?

I am currently using ASP.NET MVC to create the app, if that helps.

Here's a sample page:

<body>
    <div class=".loading">
        <p>
            <img src="http://sampsonresume.com/labs/pIkfp.gif" />
            Please Wait
        </p>
    </div>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)

    <script type="text/javascript">
        $(document).ready(function () {
            $('.loading').hide();
        })
    </script>
</body>

Upvotes: 1

Views: 14103

Answers (4)

Rick B
Rick B

Reputation: 1166

It depends where the delay is happening. If it's happening on the server after the user clicks a button, one solution I've used in the past is to display a loading message immediately after the user attempts navigates to the page, before the request is sent to the server.

$('a.btn').on('click', function () { 
        $("div.page").showLoading();
    });

I'm using the jquery showLoading plugin in the example above, and it's displaying on the button click which causes the browser to show the loading icon while the server is doing its thing.

Upvotes: 0

Claudio Redi
Claudio Redi

Reputation: 68400

You should start the page with the load message visible and hide it on load event. Something like this:

HTML

<div class="loading">loading....</div>

JS

$(window).load(function() {
    $('.loading').hide(); // hide message when finished with load
});

EDIT

I've replaced document.ready by windows.load as document ready doesn't wait images to load.

Upvotes: 3

Maciej Czekaj
Maciej Czekaj

Reputation: 64

Use 

$(document).ready( function() {
  $('.any_div').hide();
})

Upvotes: 0

Mathew Thompson
Mathew Thompson

Reputation: 56429

If you're talking about a delay on the server, then no there's no event that will allow you to hook into. The only option would be to load your page via ajax then display your loading message on ajaxStart and hide it on ajaxStop.

If you're talking about a delay on the client however, then the approach Claudio outlined is your only option.

Upvotes: 1

Related Questions