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

Question

问题描述：我的页面包含文字和缩略图的表格。通常情况下，表格中包含的条目多于屏幕上的条目，导致右侧的滚动条。到目前为止没问题。当加载页面或选择表格的下一页（分页）时，表格会被渲染 - 滚动条位于页面底部，我希望它在完全加载后。然后会显示缩略图。由于它们的大小比表中的文本大一点，因此表格会变得更大，导致滚动条被设置在页面中间的某个位置。

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

我不想弄乱缩略图大小。客户习惯于实际设计和图像/图标大小。

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

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

Answer 1

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

但是，您也可以使用以下hack：监视表高度，如果更改，请滚动到底部：

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上的scrolltop，看看它是否在底部，然后在onload事件（在加载所有图像时将被触发）再次检查并在需要时滚动到所需位置。

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

编辑：如果您动态加载图片，可以做两件事：

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

无论如何，在这些情况下，你应该为每张图片使用类似的东西：

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

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