Question

我有一个简单的表，每个单元格中有一个链接和一个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个单元格，并且图像在180px到800px宽度之间变化，我决定先加载空表，然后用每个单元格内容刷新页面。这样，用户将能够与加载的图像进行交互，而其余图像仍在加载。

我认为使用ajax循环可以在每个页面加载时触发，并将计数器设置为单元格总数。但我不知道怎么做。

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

感谢您的时间。

Answer 1

您可以在javascript中执行此操作，并在jQuery的帮助下使代码更清晰。

您要加载的HTML在data-src属性上有图像名称，而src是您应在服务器中提供的空白文件（此处名为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>

如何逐个单元地加载表

1 个答案: