My first thought is that that happens when the site is building the layout as it downloads the page and its components - particularly images. And you’ve got a lot of images on that page, so they will take a few seconds to download. Although a lot of your images do have the height and width set, some of them don’t. In particular, the images that you are resizing on the server don’t have the height and width set in the HTML. Try setting the height and width of each image in the HTML and give it another go!
Well, what StevieD’s suggestion does is stop the browser from needing to do two renders through the page, which is what they (dunno if all of them do it or just some) do when they see <img> tags without heights and widths. This is because the browser doesn’t necessarily know how much space to set aside for those images until after they are fully downloaded. Then it’ll do a re-render with the new information.
So this is one instance where setting height=“” and width=“” isn’t presentational crap that needs to GTFO of the HTML… which is why those attributes haven’t been deprecated from Strict doctypes on images and other replaced elements.
I’m actually finding that it does solve the shifting problem, but it distorts my images if I set height/width because I’m using an image resizer to render them proportionately. I tried to wrap them in a <div> tag but the image still needs to render (twice, as you said) regardless of what it’s wrapped in, so it will look distorted regardless.
Is there a way to preload images on a dynamic website? I can’t really use a preloader with CSS because I’d have to code each image in, and that’s just not realistic.
Ah, you don’t know what the sizes are going to be?
Hm, that’s tricky unless you are a back-end programmer. Because that back end would have to see what the resulting sizes are (after resizing) and plug those values into the HTML right before feeding that HTML to the browser.
However on the main page, the space you have for images is the same… or so it seems.
What we did on our local fire department site was decide on a good, but limited, set of sizes we’d have. So images are dynamically resized to one of a preset group of sizes (since most of the photos we have are already in 2 or 3 dimensions to start with… modern cameras tend to keep to a fairly standard portrait and landscape dimensions). This way we were able to make just a few CSS classes
since anyone with a width of 300 had a certain set height (because the images coming into the system were from modern cameras and thus generally always had a certain dimension), we could set height and width with css… and then we switched to having
<img height=“” width=“” … in the HTML. The back-end plugs the values in there.
This helped gallery pages load faster without jiggling.
The images aren’t resized to those dimensions, those are just the constraints. They are all different sizes, so this php script from Shifting Pixel uses my constraints and resizes accordingly/proportionately.
So while it may say 150x150, the image may actually come through as 150 x 75 or vice versa. It will never exceed those dimensions but will always be proportionate. It’s a great script, I use it on hundreds of sites. The problem I have overall is Internet Explorer. FF displays perfectly, as does Chrome. Of course.
Originally only a few pages were shifting. I checked the tables and the images and still shifting. I validated a few pages, still shifting. This site is about to drive me over the edge. Can anyone help here?
As already suggested in the thread make sure all images have their height and width attributes present in the html. Also on tables that have fixed width you should add table-layout:fixed to increase rendering speed.
You should have started your own thread as your post is lost at the end of this old post.