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.
Related
I have an image manager that shows a fixed sized grid of images. The thumbnails are relatively small already so I can't really make them smaller. I implemented lazy loading and using a debounce function to check if the images on in the visible region. This increased the speed of launching my image manager. However, if I scroll while the new batch of images are being loaded, the scrolling becomes very slow. Is there anyway around this or to further optimize loading images?
EDIT:
Is there a way to prevent scrolling while a new batch of images are coming in? Kind of like how Youtube just keeps bouncing when we try to scroll to see more comments while they are still being loaded?
Try not to load all the images at once (which I guess you've implemented with Lazy loading), I'm aware that the users online have a high tendency to scroll fast.
I would suggest, few things here:
First
Implementing the Lazy loading in a correct way is essential. here is a list of few best techniques, make sure which works best for you.
You've mentioned, that the thumbnails are relatively small, however I assume only specifying smaller dimensions is not sufficient, I hope you have covered this ground, Else maintain two folder one for Actual images and another for Thumbnails on your hosting server.
Even though we take utmost care, users upload tons of heavy images on our server, if that is the case, you need to resize the images on client end and then upload on the server, one copy in Actual images and another for Thumbnails
If you are talking about product images, keep the PNGs, Why, because they are far better then BMPs and JPGs. Also you can compress them with online tools like https://tinypng.com/ OR with softwares like https://pngquant.org/
Hope this helps resolve your issue, coz it did to resolve mine.
--N Baua
It turns out the slow scrolling was due to me calling getBoundingClientRect() to find new visible images while there were some images still being loaded. That caused a reflow which bogged everything down.
I changed it to load images in batches so that getBoundingClientRect() isnt called when there are images being loaded.
When on my website large amount of data like picture and gallery slider and data along with animation is being loaded it causes the scrolling of the page slow. when I try to scroll the page through the arrow keys the scrolling becomes almost zero with lags between them.
all the javascript files and css are being loaded from cdn links.
is there any specific reason why it is getting slow scrolling. I have used AngularJS.
This is just a guess, but you need to optimize all your photos for whatever size you are displaying it for because they are likely too large. You can use this link to create your new image files:
http://optimizilla.com/
Using the one time binding with angular and increasing the gallery sliding time and there are many way in which angular can be optimised.
https://www.binpress.com/tutorial/speeding-up-angular-js-with-simple-optimizations/135
It helped in my case
I have implemented a simple jquery carousel for mobile devices which has three containers for three images at a time. I have used jquery for the animation. Depending on the user's swipe direction, left or right, I update the contents of the relevant image container. The contents include the image's src path and the image title in a div tag. This works fine across all Android devices, but I am getting a delay in image load in iOS devices. Due to this, there is a flickering when the previous image is replaced with a new one. How can I solve this?
Thanks in advance!
Add 2 more containers off screen (one at each side) to pre-load the images and scroll them in when needed. This is a very common design.
I am developing a website using parallax. Just a brief note on what I did so far.
I used the skrollr plugin for generating the parallax effect. With this plugin I was successfully able to move elements with different scroll speeds. However, there are a few major issues I really to resolve.
Given your understanding and guidance I look forward to get through them.
Here is what I am trying to address:
1) The site that I developed is not responsive with parallax. Data attributes for elements are written inline (and thats how so far I think they are written: inline). So because of that even on screen resize, the inline styling of data attributes remains intact. Hence, the responsive stuff for parallax (on desktop version) is not able to produce same effect on mobile versions.
2) I checked the sony website. Link : http://www.sony.com/be-moved/
They have used parallax and the site is responsive.
Parallax websites are based more on the imagery content. So, how does the site load faster when the images are of huge sizes. (Running into MBs). The sony website has very heavy images (size running into MBs). How do images of such heavy sizes load so fast?
3) Again, coming back to the sony website. On scrolling the user is shown various perspectives / angles of sony products. So, how are the multiple perspectives of every product captured for scrolling.
How is such precise sequential image with varying perspective for every product shown on scroll?
Its the entire background image that changes perspective. So, how is that done? Thats not just plain parallax, right?
I am mentioning this site because its implemented in a differenet way from other simple parallax websites. Sony's implementation is what I am interested in!
4) What would be best to do? Changing background images on scroll(like the way its done on sony) or changing the position of single elements using data attributes?. (like its done on www.numero10.ch)
I have been asked to implement parallax in two ways:
a) only move the elements within the background. Like if its a sky image with two clouds on the right. Then just consider moving the two clouds to the left on scroll.
or
b) Have different background images with the two right clouds moving to the left. So, that means I will have a volley of images for just moving the clouds from right to left; with every image having two clouds shifting towards left by pixel positions.
Looking forward for a reply. :)
Thanks for your patient reading.
I think this will lead you to the right direction: https://ihatetomatoes.net/sonys-be-moved-website-deconstructed/
It explains in detail exactly how the Be Moved website is constructed.
2) I believe they use something called "Lazy Loading" which is displaying a "fake" lighter image until all the HTML,CSS,JS is loaded to then load the real images and replace them.
3) That is not mere parallax , they are using the canvas element ( How exactly I don't know but check the page source )
4) It is better to leave an image as a fixed background and work with smaller elements.
I think that site is not just parallax layered scrolling, It is a combination of a sequence of video clips triggered on scrolling. I have not inspected the element of site but I think so. But site is loading tremendously fast compared to other such sites because of your cache in your system and implementation of lighter images in the starting and heavier images at last
I have an image of a vine of leaves I'd like to load slowly from left to right after a delay (after the site fully loads) to underline and emphasize a slogan of website I'm working on. I don't want to animate the image, just make it seem as though it is growing by loading it slowly.
Is there a CSS solution or would it be easier to use Jquery?
Thanks so much in advance for any help!
I don't believe there is a CSS solution to your query. In photoshop you can save a jpeg or png as progressive (interlaced) so that it downloads progressively but on anything but the slowest link a regular size file will appear to load quickly.
I would have thought your easiest option was an animated gif - the opacity and apparent size could be tightly controlled and you can set it only to run once per visit. You could bind the image to the jQuery(document).ready() callback for the "after the site fully loads" part of your request.