I have a webview which opens a page that shows different images like a gallery.
The image is saved locally on an sdcard and is loaded through css with background-image: url(file://...).
This issue seems (not sure though) to be connected to Android's request for resources for some reason. The longer the OS needs resources the bigger the white (or black) band is.
This doesn't happen always in one test session and affects images randomly (in a cycle a certain image displays ok, in the next it doesn't). Also it seems to affect only images, displaying an iframe is always loaded normally.
I wouldn't have a problem if this happened for one second and then it would display normally, the problem is that the image stays like that until the next refresh of the webview.
android's version is 4.4.2. It is a mk808b plus device if any of this helps...
Any ideas on how to solve or somehow decrease the times this happens... anything really... except using imageview, I want to keep all in the webview. Any directions to follow for further debugging are also greatly appreciated.
Thank you for any help you can provide.
If it is possible I would try converting background images to a vectorial format (like SVG). Rendering should be easier and less memory hungry.
Related
I have a header SVG image on my website landing page, https://www.csselectronics.com/.
This header image displays correctly on all desktop browser I've tested. However, I've recently found that it sometimes does not display at all when using a smartphone (e.g. iPhone 10, iPhone 11, Android phones).
The image simply is not loaded, though if a manual refresh is done on the page it seems to load correctly. The non-loading can then be re-triggered by clearing the image cache on the phone.
Any idea what might cause this issue?
This was the result of using negative margins on the image div container.
I have an application with a WebView, where there's a long list of posts that Autoloads via Ajax when the user approaches the bottom of the scrollable area, so I display the word "Loading ... " and an animated GIF beside it created via Ajax Loader site.
The problem is that this Gif sometimes appear as a still image in some devices with Androind 2.3.5/2.3.6, and in other devices its animation is extremely fast, and in other devices it's extremely slow.
E.g. Galaxy S Mini with OS: 2.3.6 (it appears as a still image).
Galaxy S I9003 with OS: 2.3.6 (it plays in a very very fast rate).
Galaxy S2 with OS: 4.0.3 (It plays very fast then suddenly becomes extremely slow but it's still animating).
Is there a standard frame rate or any work-around for this issue ?,
Here's the image That I'm using:
------> <--------
I know Facebook's app was using WebView with loader at the bottom of the feed but I don't know if it was animated gif or not.
I know that older versions of Android didn't support animated GIFs but I'm talking about new version
I had exactly the same problem and found no solutions! Animated GIF behavior seems really inconsistent across devices. That's the bad news. The good news is that I've made a work around, specifically for ajax loaders like yours.
You'll need to make separate image files for each frame of your GIF. It sounds horrible but it worked out ok for me - My 8 frame 8kb GIF turned into 8 png images totaling 11kb, and I got the bonus of 8bit transparency so I don't have to worry about the background color. It does mean the client has to make extra requests for the separate images though, so the fewer frames the better. I called the images 0.png, 1.png ... 7.png and put them in a folder to keep them neat.
Now the code! I'll explain it below.
HTML:
<img src="images/loader/0.png" id="headLoader" />
<div id="loaderKicker" style="visibility:hidden;"></div>
JavaScript (jQuery):
var loaderImg = $("#headLoader");
var loaderProg = 0;
setInterval(function() {
$("#loaderKicker").html(loaderProg);
loaderImg.attr("src", "images/loader/"+loaderProg+".png");
loaderProg = (loaderProg+1)%8;
}, 300);
First we have the img that we will animate. We use setInterval to change the image url to cycle through the frames. Really short intervals obviously put load on the device so we don't want to go nuts. I have a really cheap Android 2.2 device and 200ms+ intervals seem to work ok without wrecking app performance.
The loaderKicker div is there to make this work on older devices (like the ones we're targeting :) ). Android seems to ignore the calls when all we do is update an image url, so we get around this by updating the contents of a hidden div. I tried always updating with an "x" but it seems that the content has to actually be different. The slide number works well.
So that's it! It's a bit of a hack job but it works on everything I've tested on (Android 2.2, 2.3, 4.0, iOS6, Firefox, IE, Chrome) and if you're only doing it on one ajax loader that you'll then use everywhere it seems ok.
The other, completely separate, solution is to animate the image using HTML5 canvases but I couldn't tell you anything about support for them in old devices.
If you open any popup image in the Android browser, then click in any place on the page, the image is being changed (colors/sharpness/whatever - I can't define precisely, since I'm not an artist).
To see this effect, open a site with a popup image, which is implemented as a div with absolute positioning (say, http://highslide.com/ -- the first site I've googled). The site should be open in the Android browser (I've tried Android emulator from Eclipse ADT plugin and Kindle Fire). Click on any preview to popup the image, then tap on the page (keep you finger on the screen) and look at the image the same time.
My question: what this effect is about and how to eliminate it? Why don't I see it neither on PC nor on Mobile Safari? I have the same effect with my web-app, where it looks ugly and seems to be slowing a form, so I want to get rid of it.
A figure:
I've enlarged a portions of two shots, made before tapping on the arrow point, and after, and inserted them on top to show what I'm talking about.
Regards,
There's nothing wrong with your web app or your web page, this is simply a performance feature of Android. You can see this on the homescreen when you scroll and it happens in any application that scrolls.
When you tap, it signals to Android that you might potentially start scrolling. To prepare for this, it uses a compressed version of the images to make scrolling smoother.
You don't see this on your PC because your PC has no problem scrolling through a web page with tons of images at full resolution. As to why you don't see it on mobile safari, I don't know enough about the platform to say.
If every image on the page has the same physical size as specified in HTML/CSS, this effect disappears. That's why I observed this in popups: their inner images usually are resized.
I have mixed feelings. Kinda satisfaction for finding it after all and hatred to Android developers for programming this feature.
I am currently working on an application that requires the use of a WebView. It basically takes up the entire screen space.
Initially the images inside of the WebView look fine and high quality. Unfortunately, when a user taps (and holds) a button in the webview, the images then lose quality and dither until the finger is released. Is there any way to disable this?
A good note, my app does not need any scrolling whatsoever. I thought Android would only lower the quality on scroll to better performance.
the only solution is to make your own image viewer, the webview resamples images at lower qualities
I've been dealing with the same issue for a long while. The best solution is to split the image into several sub-images and load them altogether within the same html file.
The easiest and fastest solution I found is with Adobe Photoshop:
Open you image
Create horizontal and vertical guides
Select the Slicing tool and activate the "create slices from guides"
Save for web (I'm not using the English version, but you get what I mean)
Select your desired image format
Save, but while saving check the option "Html and images"
With this, you'll avoid dithering with any image as long as you split it into enough pieces,
I have a simple app that displays a series of images and infomation about those images. I've set it up so that when a user touches an image, a new activity is launched and they see more pictures and a longer text description about that image. On that screen, I've also implemented the basic gallery widget that they have here in the Hello Gallery Tutorial.
My problem is that even though I'm drawing on images from the res directory (I've thrown everything in drawable-mdpi thinking that there shouldn't be a huge deal), not all of the images on the gallery portion will load. And I haven't been able to reproduce it 100%, but it seems like the more I play with my phone with this app running (lock screen, unlock screen, go to one image, go back, go to another one, hit home, etc), the more likely any picture that I've got loaded up locally display blank image placeholders, gallery or not (the text comes up fine though).
I'm using a series of imagebuttons, imageviews, and gallery widgets. Play with it enough and eventually they all come as blank, but killing everything through AdvancedTaskKiller brings it back.
Sometimes pictures in my image galleries will also be blank when I first launch my app. That's really weird. I have it set so that the layoutparams are 300 by 200 and I've pulled pictures all over the place to populate my gallery. They should just all scale differently, not fail to load entirely though.
Anybody have any ideas on these?
Try Slow Adapter for the Gallery.
I recommend adopting 1,2,3
It is always hard to work with images. You have to be very careful with recycling memory that your images already used otherwise you could get into different kind of troubles.
Always try to use a good Image loading library that commonly being used by Android developers.
Most commonly used library is https://github.com/nostra13/Android-Universal-Image-Loader
It will optimise your loading.