How to prevent large images from popping in?

[Jakobud]

Take a look at the following example, which uses two fairly large images in a div at 300 and 500 pixel breakpoints.

http://jsfiddle.net/9QF4f/1/

When you resize the browser, around the 500 pixel breakpoint, when the images swap, there is some jittery popping of the images when they swap.

Is there any way to prevent this? I know responsejs works great when just loading stuff on a mobile device where you don't ever change the screen size, but when people load my site on desktop I don't want them to see images and layout popping around when they resize their browser.

[Jakobud]

I think it's something to do with the scrollbar. When you are seeing the cat image, the viewport width is < 500. When you hit a width of 500, it loads the bigger image. But the bigger image is vertically taller than the viewport, so a vertical scrollbar is added to the viewport, which in turn makes the viewport < 500 again, so the cat picture loads again. And it sort of just keeps repeating this back and forth as you slowly resize the browser...... responsejs should really take the scrollbar into account.

[ryanve]

I couldn't reproduce the jitters but can imagine them. Are they browser-specific? The scrollbar is taken into effect and excluded from viewport measurement. Does CSS like { overflow-y:scroll } normalize the issue?