Choppy scrolling issue

Question

The scrolling on my page, http://www.hjaramillo.com/, is choppy and I am not exactly sure why. I think it has something to do with the way that the images are being displayed, because when you hide all the images the problem is resolved.

Also, when you click on "About" the scrolling down to that section is choppy as well.

Any ideas as to what's going on and how I can I fix it?

I think I'm seeing something wrong...is that the link to your site? Scrolling with my wheel is fine, and there *is* an About button but it doesn't scroll anywhere, it just goes to another page on site5.com. — Purag, Feb 26 '12 at 23:19
@Purmou: Too many `w`s in the link. And never mind my other comment, it is choppy after all the images have loaded. — Ry-, Feb 26 '12 at 23:20
Ah, that makes sense. :P There is a lag, though this is just usually due to inefficient Javascript or too much content on the page. Try making a test case where instead of images, it's just a div with a large height. — Purag, Feb 26 '12 at 23:24
Works fine for me. You are loading some fairly large images though eg. http://www.hjaramillo.com/images/POSTER.png which might effect performance if you're on an old machine — Turnip, Feb 26 '12 at 23:25
That's one nice resume. I've tried in Chrome, FF, Opera and IE all work fine? — Aaron, Jun 18 '13 at 22:40

score 1 · Accepted Answer · answered Jun 07 '12 at 00:34

I have had this problem in the past - and fixed it.

The images you're displaying are much too large. I love using html or css to resize my images (because who wants to do it manually), but the fact remains that most browsers will hiccup when moving them around. I'm not sure why.

With the exception of Opera, which usually sacrifices resolution and turns websites into garbage.

Resize the largest images, and see if that helps.

score 0 · Answer 2 · edited May 23 '17 at 12:12

Performance in JavaScript is slow, as you're going through many layers of abstraction to get any work done, and many manipulations with objects on the screen are happening in the background. Performance cannot be guaranteed from system to system.

You'll find that with all jQuery animation, you will get a higher "frame rate" (not the right term here, but I can't think of a better one) on faster machines and better-performing browsers (such as Chrome) than you will on slower machines.

If you are curious what all happens in the background when you set a scroll position, or other property, use one of the many tools for profiling your code. Google Chrome comes with one built-in, and for Firefox, you can use Firebug to give you some insight. See also this question: What is the best way to profile javascript execution?

Choppy scrolling issue

2 Answers2