图像加载到页面后调整滚动条时出现问题

Question

问题描述：我得到了一个带有表格的页面，其中包含文本和缩略图。通常，表格包含的条目数量多于屏幕所能容纳的条目数量，从而导致右侧出现滚动条。到目前为止没有问题。当加载页面或选择表格的下一页（分页）时，表格将被渲染 - 滚动条位于页面底部，我希望它在完全加载后位于。然后就会显示缩略图。由于它们的尺寸比表格中的文本稍大，因此表格的高度会变大，导致滚动条被设置在页面中间的某个位置。

加载图像后的页面和表格，您可以看到滚动条位于页面中间（垂直）的某个位置：

我不想摆弄缩略图大小。客户习惯了实际的设计和图像/图标尺寸。

使用分页功能，表格是页面上唯一被替换的元素。不幸的是，表上的“onload”不起作用。

如何才能在加载图像后显示滚动条（导致滚动条的正确位置）？ 有没有办法在表格完全加载后将滚动条设置到页面底部？

Answer 1

有 jQuery 插件可以等待所有图像加载，但我无法让它们快速工作，也许你可以： 此处和此处。

但是，您也可以使用以下技巧：观察表格高度，如果它发生变化，则滚动到底部：

var lastHeight;
function watchTable(){
    var currentHeight = $('#myTable').height();
    if(currentHeight !== lastHeight){
        lastHeight = currentHeight;
        $('#myDiv').scrollTop(currentHeight);
    }
}

setInterval(watchTable, 100);

请参阅我的 demo fiddle 作为一个工作示例。

Answer 2

最佳实践是在 HTML 或 CSS 中设置缩略图的宽度，如果所有缩略图的大小相同，您可以添加类似的样式

.thumbnail {
    width: 150px;
    height: 100px;
}

，或者，如果它们的大小可能不同，则必须添加 width 和 height 属性。

另一个解决方案是：

在 DOMload 上查看文档的滚动顶部，看看它是否位于底部，然后在 onload 事件（加载所有图像时会触发）再次检查是否滚动到如果需要的话，可以选择所需的位置。

但我建议始终设置图像的尺寸，这样页面加载时就不会跳转。

编辑：如果您要动态加载图像，则可以执行两件事：

1. 预加载图像，然后以正确的尺寸插入它们。
2. 对图像使用 onload，但是，您仍然需要使用 document.createElement('img')，这样您就可以确保所有图像都已加载。

无论如何，在这些情况下，您应该对每个图像使用类似的内容：

var image = document.createElement('img');
image.onload = function () {
    // Image is loaded
};
image.src = 'test.jpg';

注意，您必须在附加事件后设置 .src ，否则 Opera 中可能会出现一些问题。