Home/ Questions/Q 8991427
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T22:43:26+00:00

I’m currently building a one page website which uses jQuery to animate the scrolling.

  • 0

I’m currently building a one page website which uses jQuery to animate the scrolling. I have a Tumblr blog embedded using jQuery Ajax. When the blog is loaded with all its images it lags the scrolling animation.

As a way to help this I don’t load the blog until the scrollTop is within a certain range or the blog and even then only load when the user isn’t scrolling for at least half a second (to stop it triggering when scrolling past the element)

However, like I said, once it is loaded the images cause the scroll to be laggy. What is the best way to hide the images (they’re already loaded) when not in view and only show them when the user isn’t scrolling past them? This way they stay hidden when the scroll animation moves straight past them?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could simply use jQuery("#your-image").hide();

    But the problem you are probably having is a browser cache leak. So what you could do is remove the images from the DOM, but then you have to reload them every single time the user scrolls to is and you will get a tremendous data transfer. So I suggest simply using the hide() function from jQuery, but this will not fix the caching problem.

    A nice thing to do could be starting Google Chrome and use the developer tools provided. Simply push f12 on your keyboard and have a look at the Timeline. In the 3rd tab from the top (on the left side) you can select memory, is this very high? A great danger with websites like this is the memory overflow. This means the JavaScript garbage collector can not remove all unused objects. So make sure you do this right.

    edit: I found this article on the Smashing Magazine facebook page which you might find interesting reading.

    • 0