我有一个网站,我从数据库中加载图像列表(缩略图).问题是图像显示得相当慢,因为使用Url.Action获取每个缩略图相当耗时(当通过整个MVC管道时).
因此,我想用Ajax& amp;异步加载图像. JQUERY,同时显示每个图像的标准加载图像(ajaxloag.info),直到加载图像.类似的问题已经提出here,但我需要一个更完整的例子,因为我对MVC和JQUERY很新.
提前致谢,
查看(partialView)
// Foreach product,display the corresponding thumbnail
<% foreach (var p in Model)
{ %>
.
.
调节器
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 – 包含Javascript的父视图
最佳答案
您可以使用HTML5 data- *属性:
然后在一个单独的js文件中:
$(function() {
$('.async').load(function() {
$(this).unbind('load');
this.src = $(this).attr('data-img-url');
});
});
另外我会使用编辑器/显示模板而不是在视图中编写foreach循环:
<%= Html.DisplayForModel() %>
并在相应的显示模板中放置图像:
<%@ Control
Language="C#"
Inherits="System.Web.Mvc.ViewUserControl