The website I am developing has a page where an admin can upload content by himself, in this case cars for sale. All was working great but the client and designer failed to mention the vast quantities of cars that will be added to the page. I didn’t foresee it and now due to such large number of items, when I scroll down, the whole browser is lagging. Bear in mind only some browsers are lagging, for example Google Chrome works perfectly on Windows 8.1 but is lagging on Mac.
I cannot pinpoint what could be causing the problem since it is showing a decent, over 30 frames per second on Google Chrome, and I cannot detect any big memory leaks or anything like that. Also, when I scroll really quick, there are grey/white squares which I think are there because browser does not render the view fast enough.
Does anyone more advanced than me can advice on what could be the problem?
This doesn’t seem to be a css as such but I would guess its the script that loads and resizes the images that is causing the problem as it probably has to resize every time you scroll or change the window size. You seem to be loading a number of images at 40k each (although they could be optimised down to about 20k without much loss).
You are also using filters on those images and filters are a heavy resource to use and could have something to do with the lag when scrolling. Firefox often suffers scrolling lag especially with gradients and fixed backgrounds and I’m guessing the filter comes at a cost also.
The main problem is still probably the script loading and resizing that number of images as you have about 300 listed in the html although you are only showing 20 or so at a time.
I’ll move the thread to the JS forum and see if someone more knowledgeable there can take a look.
You were right about the images, the problem with them is fixed now. What in fact was causing the issue was a lazy-loading plugin on images which didn’t use throttling and thus with each scroll it executed a relatively heavy function.
Thanks for the help anyway, it put me on the right track
