I have an javascript image gallery that slides in images from offscreen in Mobile Safari. It seems like the offscreen images are not getting cached because every time they slide in it takes a few seconds to load them at which point they are already halfway to their destination. I'm trying to get all the images to load during the initial page load. It seems Mobile Safari ignores or "garbage collects" offscreen images. Is there a way through CSS3 (some -webkit prefix property) or any way so that all images load and stay loaded so their is no flickering.
Thanks!
If the set of images in the gallery is somewhat static (ie. it's managed through some sort of upload process rather than picking up images dynamically), you could try using an HTML5 offline application cache for your images. This blog post describes the technique, along with some other pitfalls frequently encountered with iPhone caching.
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.
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
In my HTML5 mobile app, I am retrieving 10 images at a time from imgur (the user clicks a button to get more images). When the images are retrieved, I apply some formatting via CSS (mostly to the height and width so that it properly fits the dimensions of an iPhone).
My guess is that one of the reasons why it’s taking so long is because I’m applying formatting to the images once they’re retrieved and then showing these images. Would I be better off saving the images in the state they should be displayed with the right dimensions so I don’t have to apply any CSS to them? Would this help in getting the images to load faster?
Thanks!
According to this post, you should probably be grabbing only six at a time.
Also, open your browser's debugger, go to the NETOWRK tab and watch how long things are actually taking.
Are the images that you are loading actually bigger than the display size? If so, it will load slower not because of the CSS application, but because you are loading unnecessarily big images. You should always re-size the images that you use to the displaying size. You can also change the format and/or compression of the images to make it smaller, thus loading faster.
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/
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.