Problem adjusting scrollbar after images have been loaded on page

Problem description: I got a page with a table containing text and thumbnails. Usually the table contains more entries than would fit on the screen leading to a scrollbar on the right side. No Problem so far. When loading the page or choosing the next page of the table (pagination) the table gets rendered - the scrollbar is at the bottom of the page where i would like it to be after complete load. Then the thumbnails are getting shown. Due to the fact that they are a bit bigger in size than the text in the table the table gets bigger in heigth leading to the scrollbar being set somewhere in the middle of the page.

Page and table after the images have been loaded, as you can see the scrollbar is somewhere in the middle (vertical) of the page:

I do not want to fiddle around with the thumbnail size. Customers are used to the actual design and image/icon sizes.

Usign the pagination function the table is the only element that gets replaced ont he page. "onload" on tables does not work unfortunatly.

What can i do to have the scrollbar appear after the images have been loaded (leading to the correct placement of the scrollbar)? Is there a way to set the scrollbar to the bottom of the pag开发者_JAVA百科e after the table has been fully loaded?

---

There are jQuery plugins to wait for all images to be loaded, but I couldn't get them working on the quick, maybe you can: here and here.

However, you also could use the following hack: watch for the table height and if it changes, scroll to the bottom:

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

setInterval(watchTable, 100);

see my demo fiddle for a working example.

---

The best practice is to set the widths of thumbnails in HTML or CSS, if all the thumbnails are of the same size, you can just add the style like

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

Or, if they size can vary, you must add width and height attributes to the ` tag.

Another solution is to:

Look at the document's scrolltop on DOMload, and look if it's at the bottom, then on onload event (which would be fired when all the images loaded) check again and if scroll to the desired position if needed.

But I recommend always set the dimensions for images, so the page wouldn't jump when they are loaded.

Edit: If you're loading images dynamically, you can do two things:

1. Preload images and then insert them with the right dimensions.
2. Use onload for images, however, you still would need to use the document.createElement('img'), so you could be sure that all the images are loaded.

Anyway, in these cases you should use something like that for each image:

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

Note, that you must set .src after attaching the event, or there could be some problems in Opera.