I've been given a design for a commercial affiliate-related website where the homepage has 2500+ images on it. Two directions I'm thinking about to ease the loading of the images is to utilize a lazy image loading script.
I've been messing with the jQuery JAIL (Async Image Loader) script. I have it set so that it loads all the visible images when the page loads. Then after a couple seconds it begins downloading all the rest of the images on the page that are below the fold. This is typically like 2400+ images.
The problem is that when the browser is told to download 2400 images it basically freezes up, or at least freezes up the scrollbar until it's done.
Are there any jQuery image loading scripts that are similar to the JAIL but that allow for some type of throttling? Anything really to help from freezing up the page.
I'm also looking into css sprites but for various technical reasons and time constraints it might not be feasible.
Use this jQuery plugin. Example here
It delays loading of images in long web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them.
Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.
If the images are small, you might consider combining them into fewer large images and loading them all at once, displaying them all as <div> elements with their background image set. Example:
http://jsfiddle.net/XXRwD/
Related
I am trying to write a chrome plugin so I can use some websites that includes a lot of images I dont care about that are problematic to load seeing as my internet connection is poor.
As such, is it possible to stop loading images but just load white boxes instead, with the exact same size, attributed links etc.? I am a bit unsure where to even start on this, as I tried to just .display = None, but that does not help me loading the website when my connection is bad.
Reason why I want to load something is because if all the images etc just disappear the website layout basically goes down the drain and I can't scroll around on it.
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.
I have a giant hero banner on my front page, covering the whole screen, and the image lazy loads, so it's blank with a spinner showing until it fades in. The problem is Google Page Speed Insights mentions render-blocking CSS and prioritize visible content for this page. However, I get a 98/100 on the same website, but for a different page without the hero banner.
So, I think it's safe to say the image is causing an issue. When I look at the screen shot on the report, it just shows the blank white screen before the image has loaded in. I deliberately keep it blank like this until it's fully loaded and rendered, using JavaScript. Is there any way to improve my Page Speed score, despite this situation?
Google page insight is rendering your initial html response without running your javascript or external css files. So all that it sees is your html and embedded styles.
It will show you the before and after of your page, and if too many pixels have changed in between it will reduce your score.
To solve that - don't lazy load anything above the fold.
I know many say "don't worry about google page speed insight score", but with this recommendation from google I agree- your page should render the above the fold content as fast as possible and defer items below the fold if necessary.
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
Does Bootstrap "Carousel" load all images at one time? If so, does it reduce site loading speed and increase loading time?
I do not know how Bootstrap Carousel javascript file works. When next icon is clicked, if next image is loaded via ajax, there is no problem. But if all images are loaded at one time, I think it reduces page speed.
Any idea?
Bootstrap carousel just rotates it's items. If images are defined by src attribute, images will be loaded with the rest of the page.
You can use some lazy loading solutions to load images sequentially - Google search
Bootstrap does not do any magic lazy loading behind the scenes as Tigran points out. However, many browsers do not request images that are hidden through "display:none". So when inspecting network traffic with, for example the Chrome browser, you will see that the images are in practice "lazily" loaded.
An outdated and almost unreadable list of browsers with this behaviour can be found here: http://www.w3.org/2009/03/image-display-none/results