I have designed a DVWP in SharePoint Designer 2010 that shows multiple items from a library (let's say it shows 1000 items for example) grouped by category. What I would like to do is show a loader image for the few seconds it takes to load all items.

Is there a way using JavaScript or JQuery to trigger this? I tried using the onLoad event for the body tag or an image at the bottom of the DVWP but neither works. I think it's probably because the DVWP wrapper is loading before the actual rows of the datasource but I'm not sure.

How would you tell a script to do something when the last row of a dataset renders?

UPDATE: After turning on the AJAX loader, it looks like the rows themselves are loading pretty quickly (like 2 seconds). Each item has a thumbnail image attached to it, however, and those take several seconds to load. So assuming we have a thousand images, is there a way to dynamically determine the last one and then show a loader image until that one loads? Same result, but I realize that changes up the question a bit...

3 Answers 3


So I assume you are saying you tried to display something during the onload and call the rest of your code right after in a later event or in onload.

With ASP.net, nothing is drawn or changed in the UI until after the RENDER event.

If you want to display a loading image, you must allow the postback to finish, then use javascript to draw the load image and postback again. Generally I use ScriptManager.RegisterStartUpScript() (here) to call something like $('.postBackButton').click().

ScriptManager.RegisterStartupScript(Page,Page.GetType(),'loadCallBack',"$('.lodImg').show();  $('.postBackButton').click()",true);

Then you wire up an OnClick to a function that does the loading.

When the loading is done (end of postback), the page will reload and the loading window will be done.

The markup will look like:

<img src='load.gif' class='loadImg' style='display:none' /><asp:Button runat="server" OnClick='ButtonPostBackCall' CssClass='postBackButton' style='display:none' />

If you set the data view web part to AJAX load, you should get the default loading image with no additional code required. This can be done by right clicking on the web part in split mode and selecting web part properties, expanding the AJAX options and ticking the Enable Asynchronous Load option or setting InitialAsyncDataFetch="True" in the DVWP code.

  • That is an awesome feature I never knew about, so thank you immensely. With that on, I've determined that the delay I'm seeing is actually for the images attached to each list item - the items themselves are loading fairly quickly. I'll update my original question accordingly.
    – Omegacron
    Commented Nov 25, 2013 at 19:16
  • That's a lot of image resources to load, I'd probably go with paging too, this will cut down on the amount of time to load all the data and images plus give the users smaller chunks of data to consume at a time. Commented Nov 25, 2013 at 19:41

Ok - I found a solution for the issue. Since there was no easy way to determine which thumbnail image was the last one to load, I instead went into the DVWP code and added my own "anchor" image that I could attach an onLoad event to. Initial attempts to do this didn't work because the image was ready before the thumbnails had finished loading. Here is what I did to fix the issue:

  1. Open the DVWP in SharePoint Designer and find this snippet

<xsl:call-template name="dvt_1.body"> <xsl:with-param name="Rows" select="$Rows"/> <xsl:with-param name="FirstRow" select="1" /> <xsl:with-param name="LastRow" select="$dvt_RowCount" /> </xsl:call-template>

  1. After that call-template closing tag should be a table closing tag - between the two, add a new table row and cell with colspan="99" or however many columns you have showing
  2. Insert the image into that cell and apply your onLoad event

In my case, I have a DIV layer that is immediately visible with my pre-loader animation and wording, but when the final image loads the visibility style is changed to hidden. This may not be the best solution, but it's working so far.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.