I'm trying to eliminate the white flash between loading local pages within my iOS Phonegap app.
I've tried everything but I still can see white between page loads.
I've tried making my html background black, using data-transition=none and also making the webView backgroundcolor clear.
I've put::
NSLog(#"BEGIN EDIT - set webView to transparent");
[self.webView setBackgroundColor:[UIColor clearColor]];
[self.webView setOpaque: NO];
NSLog(#"END EDIT - set webView to transparent");
In the CDVInAppBrowser.m , in the CDVViewController.m and in the AppDelegate.m but nothing seems to work! Maybe I'm placing the code in the wrong position.
Please someone just help me get rid of the white between page loads!
PhoneGap loading can be quite slow. You may need to use the splash screen API to show and hide splash? http://docs.phonegap.com/en/2.8.0/cordova_splashscreen_splashscreen.md.html#Splashscreen
On the page above, also pay attention to iOS Quirk section. Alternatively, have you try single page application with jQuery Mobile or AngularJS?
I had the same problem when I made a mobile application with Phonegap.
I don't know how do avoid these flashes but when you've built a simple app with only a few screens you could implement all your HTML documents into one file like:
<html>
<body>
<div class="page" id="page-1">
Content of page one
</div>
<div class="page" id="page-2" style="display:none;">
Content of page two
</div>
<div class="page" id="page-3" style="display:none;">
Content of page three
</div>
</body>
</html>
Now you could switch between the contents of each container by making it visible/invisible for the user.
The idea behind this solution is that all of your app's content will get loaded once (at the beginning) and with jQuery you will switch between the content without these white flashes when the webbrowser has to render the new page the user has been redirected to.
This is a good solution only when your app does not contain too much contents.
like I said, making the app a single file was not possible in this case due to the complexity of it and I don't mind if the white flashes between page loads are black since they don't take long. Here's the solution I've found using Phonegap 2.8 for iOS:
In the CDVViewController.m
- (void)webViewDidFinishLoad:(UIWebView*)theWebView
{
// Black base color for background matches the native apps
theWebView.opaque = NO;
theWebView.backgroundColor = [UIColor blackColor];
//the rest of the code…
Hope it's useful to someone else.
Related
I have made some modifications to a website I am working on and now, when I load the homepage, the header image seems to load after the rest of the page leaving a white space and then the image loads it pushes the rest of the page down to where it should be. This site is created from scratch with HTML, CSS and JS. The website is https://www.visionwebdesign.ca so you can have a look. Once the webpage is in the browser cache, it loads fine.
The header is actually a part of a carousel of images. Here is the code I am working with:
Vision Web Design
...
I have tried reducing my images to a smaller size but no luck there. Looking for any help available.
J.P.
This is probably not the answer you are looking for, but looking at the HTML page code it appears you are just loading in the images quite normally using IMG tags, no script code in use there, so any delay may simply be the time it takes for the images to download from the server to the browser. I saw just a bit of a delay in loading the header image (tried in both Firefox and in Chrome) but I'm on a 300Mbps down internet connection so everything is fairly quick.
Image size may be one thing to look at. Alternately setting the content DIV to display:none until after the first image has loaded then switching it using Javascript. I found this example here at Stack Overflow:
A method of solving this problem would involve hiding the full body for the 2 seconds or however long it takes to load the body. We can do this using Javascript:
var timeouttimer = setTimeout(showbody, 2000);
var everything = document.getElementById("allcontent");
function showbody {
everything.style.display = "block";
}
And then in the HTML add the following div surrounding all the content of your webpage:
<div id="allcontent" style="display: none;">
I have a Wordpress site that has numerous large images (full screen background image scroller) and when I go to my page it goes 'pixel-ly' and looks broken until fully loaded.
What is the proper procedure to load a websites images so the users first look at the site isn't broken or glitched?
Hide everything until the page is loaded. Show a loading screen in the meantime if you want.
<body onload="document.getElementById('loading').style.display = 'none';document.getElementById('content').style.display = 'block';">
<div id="loading">Some loading text or icon goes here...</div>
<div id="content" style="display:none;">Main content goes here...</div>
Block page from user interaction until all images/components are loaded. It isn't too complex - use jQuery.
it is already answered in
prevent user to perform any actions while page is loading
Is there source code (or a browser plugin) to convert the contents of an HTML 5 web page to an image file? This would not just include the visible contents, but the hidden contents as well (assuming there were scroll bars in the page). If there isn't, any advice on how to approach this particular functionality would be appreciated, and I can look into it.
I found this...
html to jpg with c#
However...
I think they just had text in the page, so it doesn't have any dynamic images on the page. My page specifically uses the HTML 5 canvas functionality to draw images. So that must be part of the image file.
It looks like you should be able to do it using javascript with this technique:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
Make sure to take note of the following caveat however:
Note: The toDataURL() method requires that any images drawn onto the canvas are hosted on a web server with the same domain as the code executing it. If this condition is not met, a SECURITY_ERR exception is thrown.
EDIT: You may also want to check out these related questions:
Save HTML5 canvas contents, including dragged-upon images
How to save a HTML5 Canvas as Image on a server
So I am trying to find out a way to view images without hiding the rest when clicked on
for instance
<img src="someimage.jpg"/>
<img src="someimage2.jpg"/>
<img src="someimage3.jpg"/>
<img src="someimage4.jpg"/>
for instance when i click on the first image it opens up in a new window and thats it
i´d like to be able to scroll through these images. i´d like to be able to go to the next image by clicking "next" for instance or something like that!
Calling an image in the browser directly will return that file, not an html page with the file embedded. In your case you will have to write a page that handles this functionality for you.
You don't mention whether or not javascript / jquery is an option for you, but it would definitely be the easiest solution in my opinion.
Look into something like a jquery carousel to handle a basic slideshow.
And if this is not the answer you were looking for, then I'm afraid the solution for you - fitting your limits of html, css and image - is to make individual html pages for each image and hard code the next and previous links... each and every one... the good ol fashioned way.
... headers
<body>
<img src="someimage.jpg" alt=""><br>
Previous | Next
</body>
http://fancybox.net/ Has a great javascript type plugin for having the image show up in a type of lightbox. Otherwise seach for "jquery image zoom plugin". That should give you some good plugins if javascript will work for you.
I'm interested in the way lala.com works. They have a header that remains fixed at the top of the browser and they have a flash music player in it.
You can click on other links in the site and they are displayed below the header but the header is not disrupted and can continue playing music.
If the target is a modern browser say IE8 & FF 3.6, what's the best way to achieve this?
Thanks for any help.
Frames / Iframes
One way to achieve this is to create a frameset or use iframes to show the sub pages. The top (or bottom) frame would be a very tiny one, and containing your music player. The big frame would contain the page that is being browsed. This technique is used e.g. by Google when clicking on an image search result.
This method has its downsides: The user will see your URL in the address bar and not the one of the page being browsed. If the user enters something in the address bar, they will leave your frameset. It is not possible e.g. to write down the URL of the current page.
Ajax
The second, better way is to build a navigation that loads the other pages into the current page through AJAX. See an example implementation here.
This will provide for smooth loading, music will continue to play. If done right, it is even possible to retain a healthy link structure that won't break external references, and have the "back" button work. The tutorial I link to covers both aspects. Just be careful, it's a 3-part tutorial.
It works with JavaScript enabled only, though, but there are solutions that downgrade gracefully (falling back to the "normal" behaviour of switching pages when JavaScript is turned off).
Besides frames, you can do partial page refreshes with ajax. Instead of fully loading a new page on each action, you would do partial page refreshes. You can keep bookmarking and the back button functionality through careful coding. Libraries such as jQuery (and lots of others) make using ajax across different browsers signficantly simpler. EDIT A quick search revealed a Stack Overflow question on back button plugins for jQuery. So, if you use jQuery you can make this approach even easier.
Here's some stub code:
HTML
<html>
<head>
<!-- ... -->
</head>
<body>
<div id="music-header">
<!-- ...Music header content goes here -->
</div>
<div id="content">
<!-- ...Body of different pages goes here -->
</div>
</body>
</html>
Javascript is provided in the link I provided on how to handle bookmarking and the back button.
This specific example lala.com is done using iframes.