如何在单元格基础上加载表格

问题描述：

我在每个单元格中都有一个带有链接和div的图像的简单表格。该简化的代码是这样的：如何在单元格基础上加载表格

<td> 
    <a href="#"></a> 
    <div> 
     <img src="image01.jpg" /> 
    </div> 
</td>

我拉值，用于从所述数据库中的链接和图像并手动生成如表：

cell = "<td>" 
     + "<a href=\"#\"></a><div>" 
     + "<img src=\"" + imageName + "\" " 
     + "\" alt=\"" + imageName + "\" /></div></td>";

当用户将鼠标悬停在图像，另一个图像元素显示为显示更大版本的悬停图像。这是用javascript完成的。

为了能够立即响应悬停，我实际上将更大版本的图像加载到表格中。我调整和裁剪他们（因此父母的div）。

由于表格大约有40-100个单元格，并且图像的宽度在180像素到800像素之间变化，我决定首先加载空表格，然后用每个单元格内容刷新页面。通过这种方式，用户将能够与加载的图像进行交互，而其他图像仍在加载。

我认为这是可能的一个Ajax循环，触发每个页面加载与计数器设置为单元格的总数。但我不知道如何做。

有没有办法加载单元格的内容，将其显示给用户，并继续loadind下一个单元格？

谢谢你的时间。

如果你正在做这方面的HTML生成客户端，你应该看看jQuery的模板支持。如果你在做服务器端，更好的做法是使用某种重复控制（如[ListView]（http://msdn.microsoft.com/en-us/library/bb398790.aspx））并生成你的标记就是这样。您仍然可以拥有想要生成图像和链接的全部控件。 – R0MANARMY 2011-05-10 05:17:59

@ R0MANARMY，谢谢。我接受了你的建议并去了中继器控制。 – turzifer 2011-05-19 04:20:33

答

您可以使用javascript，在jQuery的帮助下使代码更清晰。

你加载对data-src属性的图像的名字，而src是你应该在你的服务器提供一个空白文件的HTML（这里命名为blank.gif）：

<td><img src='blank.gif' 
    style='width:100px;height:100px' 
    data-src='imagename.jpg' /></td>

这应该产生由代码：

cell = "<td><img src='blank.gif' style='width:" + imageWidth + 
     "px;" + imageHeight + "px' data-src='" + imageName + "' /></td>";

提供宽度和高度是可选的。如果你可以事先做好，效果会更好。如果你不能，只有当图像加载时，表格才会成形。

最后，要加载的内容，某处使用下面的脚本在你的HTML：

<script> 
$(function() { 
    $("img").each(function() { 
     var src=$(this).data("src"); //retrieve the data-src attribute 
     if (src) $(this).attr("src", src); // if present, load the image 
    }); 
}) 
</script>

谢谢Ariel，我试过你的解决方案，它似乎工作。尽管如此，图像仍然以随机顺序加载。你知道有一种方法可以按照他们在表格中的顺序打电话给他们吗？ – turzifer 2011-05-10 11:08:01

我能想到的唯一方法是在每个作业之间放一小段延迟。如果你想，写另一个问题，我展示。（或其他人;） – ariel 2011-05-10 12:42:31

如何在单元格基础上加载表格

相关推荐