CODEWITHSUNDEEP
javascripthtmljquery-uiasp.net-mvc-3jquery-ui-dialog
Alerty
Alerty

Reputation: 5945

jQuery UI: Loading Dialog While Images are Loaded

I have a website made in ASP.NET MVC3 with the Razor rendering view. Within this site I create charts (System.Web.UI.DataVisualization.Charting.Chart) and serve them as images with a controller to my view.

It can take anywhere from 1 to 5 seconds to load the charts. Therefore, I wish to show a loading modal dialog to give some feedback to the user.

Creating a jQuery UI dialog is very simple and I have heard of solutions with a timed closing. Yet, a time delayed close is not a proper solution in my case because the of the time variation.

Is it possible to show a single loading dialog until every image on a page is loaded and rendered by a browser? How could I do this?

Thank you! :)

Upvotes: 0

Views: 867

Answers (2)

sv_in
sv_in

Reputation: 14049

You could add a handler to Load Event

Add a absolute positioned div over the img (through css) which will show a loading img. Add a load event handler to the img tag which should remove the absolute positioned div when the load event is fired.

Upvotes: 1

Adam Tuliper
Adam Tuliper

Reputation: 30152

If you have Separate URL for each image that you can load via jQuery you can hook into the load event and when it's done hide the wait image. Would this approach work for you? If so I'll edit and add code.

Upvotes: 0

Related Questions