Webpage with lots of images: slow scrolling?

I have a webpage with a news feed. And the news feed has a bunch of images stacked vertically. New images populate the page开发者_运维问答 as the user scrolls downwards.

Things start off fast and smooth, but as more images load (and more scrolling down) the page starts to get really slow and choppy. Scrolling becomes super unsmooth.

What's the problem? And how can I fix this?

---

Try using LazyLoad for JQuery (link). It doesn't load images until you scroll down, so perfect for your use case.

---

How big are the images you are using? You should try to make image sizes as small as possible.

You could try pre-loading the images in JavaScript (Image object). That way, when the user scrolls down, the images are already loaded (or partly loaded).

---

Maybe there's a bug in your javascript. If not, you could try to delete the newest pictures when older ones are loaded.