I’m putting together a scrolling slide-show for a client. I’ve avoided use of a sprite image by animating an Unordered List. See:http://webadit.co.uk/cakelady/?page=wedding My reasoning is that this will make it much easier to change the images subsequently (no need for a new sprite).
When the list scrolls the movement per ‘click’ is not a multiple of the thumbnail image size, so the space available for the next image on the right is often less than the full width of the image. I find that if the space is less than about 80% of the image width, the image doesn’t display at all, leaving a blank space. I don’t think this has anything to do with pre-loading, because in fact my development images are repeated several times (just to make up the numbers), so they will already be loaded. I suspect it has to do with the way the browser handles overflow. I’ve not made the movement a multiple of image size because in practice image size may vary.
So far only tested in Firefox 8.
Is there a way of forcing display of the partial image ?