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

Question

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

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

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

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

在加载图像后（导致滚动条的正确放置），我该怎么做才能让滚动条出现？ 有没有办法在表格完全加载后将滚动条设置到页面底部？

Answer 1

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

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

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

setInterval(watchTable, 100);

请参阅我的演示小提琴以获取工作示例。

Answer 2

最佳做法是在 HTML 或 CSS 中设置缩略图的宽度，如果所有缩略图的大小相同，则可以添加如下样式

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

或者，如果它们的大小可以变化，则必须将width和height属性添加到 ` 标记。

另一种解决方案是：

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

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

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

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

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

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

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