Menu
Im making a page/application that presents a wide range of products. One view contains a lineup of about 130 products, eash represented by a png-image, the size varies from 33Kb to 150Kb.
The lineup can be scrolled horizontally whith the users scrollbar or custom controller, and when you hover each product I use som css-transistions to fade out all products except the one hovered, and to enlarge it.
It works perfectly smooth in Safari and decently Firefox, and in Chrome as long as I keep the image count-down. But the more images i try to add, both the scrolling and the transistions progressively gets slower until it's almost imposible to work with.
Is this some cache.problem in chrome? Is there any way around it?
I've tried to preload the images, but the problem isn't the loading time og the image, its the performance that seems to halt due to the sheer number of images.
770
But the major reason for slow page loading speed in Chrome might have to do with virus or malware, temporary files, browser extension might be conflicting, corrupt bookmarks, hardware acceleration, outdated Chrome version, Antivirus firewall settings, etc.
But, it might be running slow due to issues like, internet instability, older browser versions, inflicting extensions, lack of storage, etc. We can try out significant fixes such as updating the browser, clearing the cache, disabling extensions and blockers, upgrading storage, etc., to fix the slow chrome issue.
Check Chrome's Site Settings Open Chrome's menu and head to Settings. From the left pane, click Privacy and security. Click Site Settings > Images. Below Default behavior, select the Sites can show images option.
You can combine all your little images in one big image, and load ONLY the big image, so you do only ONE HTTP request. For display you must set the offset (background-position property) of every image using css.
Tutorial
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
