asp.net mvc - MVC, display a list of images asynchronously with AJAX / JQUERY -

i have site, load list of images (thumbnails) database. problem images displayed rather slowly, fetching each thumbnail url.action rather time-consuming (when going through whole mvc pipeline).

therefore, load images asynchronously ajax & jquery, while displaying standard loading image (ajaxloag.info) each image, until image loaded. similar question has been raised here, need more complete example, new mvc , jquery.

thanks in advance,

view (partialview)

// foreach product, display corresponding thumbnail <% foreach (var p in model)    { %> . .      <img width="100" src="<%= url.action( "thumbnail", "products", new { productid = p.id } ) %>" alt=""  /> 

controller

public actionresult thumbnail(string productid)         {             try             {                 guid pid = new guid(productid);                 byte[] thumbnaildata = _productsrepository.getproductthumbnail(pid);                 if (thumbnaildata != null)                 {                     return file(thumbnaildata, "image/jpg");                 }                 else                 {                     return file(@"../content/missingproduct.png", "image/jpg");                 }             }             catch (exception e)             {                 throw e;             }         } 

update - parent view containing javascript

<script type="text/javascript">      $(document).ready(function()      {        getcontenttab (1);     });      function getcontenttab(index)      {         var criteria = {             categoryid : "<%: viewbag.header %>",              tabindex: index,              searchstring : "<%: viewbag.searchstring %>"             };         var url='<%= url.content("~/products/getajaxtab") %>'         var targetdiv = "#listcontent";          var ajaxloadurl = '<%: url.content("/content") %>/ajax-loader.gif';         var ajaxloading = "<img id='ajax-loader' src='" + ajaxloadurl + "' align='left' height='28' width='28' />";           $(targetdiv).html("<div>" + ajaxloading + " loading...</div>");  tag in respect callback.          $.get(url, criteria, function(result)         {             $(targetdiv).html(result);         });      }       function ajaxstart()     {         $('#listcontent').mask('opdaterer');     }      function ajaxend()     {         $('#listcontent').unmask();      }      $(function () {         $('.async').load(function () {             $(this).unbind('load');             this.src = $(this).attr('data-img-url');             alert('2');         });     });  //]]>   </script> 

you use html5 data-* attributes:

<img width="100"       src="ajax-loader.gif"       class="async"       data-img-url="<%= url.action("thumbnail", "products", new { productid = p.id }) %>"  /> 

and in separate js file:

$(function() {     $('.async').load(function() {         $(this).unbind('load');         this.src = $(this).attr('data-img-url');     }); }); 

also use editor/display templates instead of writing foreach loops in views:

<%= html.displayformodel() %> 

and in corresponding display template put image:

<%@ control      language="c#"      inherits="system.web.mvc.viewusercontrol<appname.models.product>"  %> <img width="100"       src="ajax-loader.gif"       class="async"       data-img-url="<%= url.action("thumbnail", "products", new { productid = model.id }) %>"  />