How to preload images with PhoneGap? - css

I've come to believe that there's two things happening. Firstly, if you want to preload a url, you can do this:
body:after{
content: url(http://www.example.com/img/img_1.png) display:none;
}
But as far as I know, this doesn't help in this case:
body:after{
content: url(../img/img_1.png) display:none;
}
In this latter case, the image is already local, so it doesn't have to "download" it? Is that true? Or will the first bit of code cache the image even more?
I ask, because even though I do this, and I then transition to another page, using jquery mobile, the next page still takes a few seconds to load the background image. Even though it's a local asset.
How do I get around this?

From the tests I've done, it seems that two things can cause a delay when loading an image:
When the image needs to be loaded from a URL, or
When the image is locally located, but needs to be placed on the display screen
What i didn't realise is that with PhoneGap, even with the images local, it might take a little while to load. This is what was causing issues for me. Well, this and the fact that I was loading from URLs. So in my case I used the "CSS3 Caching Plugin" like so:
jQuery(function($) {
$.preload.images(document)
});
This solved my problem of loading images that was in the CSS file. But then for my own convenience, I added a section to the css file for locally cached files. Like so:
#cacheMe1 { background: #ffffff url('../img/img1.png') 50% 50% repeat-x; }
#cacheMe2 { background: #ffffff url('../img/img2.png') 50% 50% repeat-x; }
#cacheMe3 { background: #ffffff url('../img/img3.png') 50% 50% repeat-x; }
#cacheMe4 { background: #ffffff url('../img/img4.png') 50% 50% repeat-x; }
etc
This solved caching for most images, plus it allowed me to still keep URLs as loading in the app (i have a gallery section where its currently acceptable to see the images load, rather than on display).
What I also did that seems to be working, is that I use the "InAppBrowser" plugin to preload entire pages by opening them in a hidden window:
var ref = window.open('http://www.example.com', '_blank', 'hidden=yes');
If you open a bunch of files on load of the app, it seems when you either open these URLs again, or switch to the window with:
ref.show();
So there's two decent ways I've found to cache files that works perfectly for my scenario. Hope it helps someone else!

I do not know if I understood well, but maybe it can useful for you:
<img src="my.png" onerror="this.src = 'image-not-found.png';" />

When I was facing problems with preloading images I had to abandon an idea of using display:none; cause it didn't work properly (as long as I remember the browser refuses to load content of invisible elements in order to speed page load up and reducing the traffic). Instead I created a div that in browser's opinion was visible, but it had zero width and height. Required images I load as background-image for this block. The whole trick is that background-image property can take multiple values. The CSS will look like this:
#preload {
height: 0;
width: 0;
background-image: url(image-1.png), url(image-2.png);
}
So you don't get mess in the markup. Hope this trick will work in your case.

You don't need to attach the image to the DOM directly, therefor there is no need to use css to hide it. Use JavaScript to preload images.
var image = new Image();
image.src = "yourfile.jpg"
you can then provide a longer term solution using appcache.

Related

Print css, only load images at print time

I'm currently developing a complex print style sheet which is in some ways different from the HTML currently displayed on screen. I've hit a hurdle with a balance between performance and achieving the desired layout.
Basically there is a gallery of images which are loaded via javascript on the fly. Images are built dynamically via JS and output to the DOM on each request for the next image.
My problem lies in that I need to build this for printing purposes. I think I'm left with a scenario where I will have to build additional html on the page just for the print page to look correct; that isn't so much of a problem, except the images are rather big, and even using "display:none" and media print { display:block; } won't prevent the images from being downloaded on desktop devices behind the scenes by the browser. In essence I need them to stay dormont on screens, and come to life using print styles.
I had considered using the css background-image property - which I believe doesn't cause the image to load in the browser, however background image doesn't seem to reliably print across different browsers.
I've also tried using onbeforeprint javascript, but again, this is mess of browser inconsistency.
Can anyone suggest any sort of solution for this? at the moment it seems like I'm going to have to suck up the additional overhead of all the images to achieve reliable results.
If background images are an option, you could prevent the download of those when setting the parent element of the image container to display: none
Example HTML:
<div class="invisible">
<div class="img-container">
</div>
</div>
Related CSS:
.invisible {
display: none;
}
.img-container {
background: url(img.xyz);
}
#media print {
.invisible {
display: block;
}
}
Apart from that a similar question had been asked: Prevent images from loading
May be that will help you, if background images are definitely NOT an option.

Background loads slowly when page switches

Today when I wrote css I found that there are some problems appearing. I used bootstrap and darkstrap to design. In darkstrap the body's style is
body {
color: #c6c6c6;
background-color: #2f2f2f;
}
And in my own css:
body {
background: url(../img/11.jpg) no-repeat fixed;
background-size: 100% 100%
}
It looks no problem but the only question is when I switch the page, the page seems to have an asynchronous load (but I didn't refresh the page), first completing the style in darkstrap, then loading my style after 1 second. But I put my css before the bootstrap and darkstrap. And I just not refresh the page.
At last, I quote the body style in darkstrap, when I switch the page again, the body's background-color also complete after 1 seconds, it looks awful, I know the image load may send a http request and its loading may last. But I just switch the page... so where is the problem?
Where are you loading the scripts and css? Is it and the end of the page body?
One way to fix this might be to move the script loading into the page <head> section. When you do this, all of it will be loaded before any body markup. This will ensure that your CSS and the bootstrap css is ready before you see anything on the page. The downside of this is that it might make the page appear to take longer to load.
There could be other reasons, but this is the first thing that sprang to mind for me.

CSS background will not reset. It is haunted

I can not explain this at all, but I've put a theme selector on my site. A javascript dropdown box that changes the CSS the site is using.
Theme 7 is a theme that had an image of lights in the background. I didn't think it worked with the rest of it so I changed it to a different image using cPanel on my hoster, hit save, and it saved and changed like any other file.
I refreshed multiple times to get the changes, and scrolled down to Theme 7 to see how the new image looked.
Same image as before.
I tried a new image. Same thing.
....I deleted the line background-image altogether, and then quit out of the browser and restarted it.
The lights are still there.
What is going on??? I'm using Chrome btw. In Safari the image was just straight black. I think I've stumbled on a cursed picture.
Here's the css
body {
font-family: Calibri, Arial;
text-align:center;
*/background-repeat:repeat-y;
background-size: 100%;*/
}
input {
padding: 3px;
font-size: 22px;
}
select {
padding: 4px;
}
/*-----CLASSES-------*/
More stuff here
Try pressing ctrl+r to clear Chrome's cache.
It probably cached the css you were using before in your browser (and possibly the image too?) That's the only answer that makes much sense. You can force-clear the browser's cache of the css by changing the call to the file my-styles.css?abcdefghijkl in your html (or wherever it is you are loading up the styles from).... but manually clearing your cache will work too.
You may want to incorporate a dynamic Cache Control... every time you change the theme with javascript, have it change or reload the cache so your users won't have to continuously clear their own cached files when they change the theme... Depending on what server you are using, you can do this with php and .htaccess or .NET and web.config, im not sure if there is a way to do it with javascript directly..?

Images being requested multiple times from CSS

Any idea what would make a stylesheet(s) load images multiple times? The images are the same URL, nothing fancy going on.
EDIT: Only happens in safari (5.0.3) in both iPhone "mode" and default "mode" - i cannot reproduce the problem in FF or IE.
Apache_access_log says that the image is indeed being accessed multiple times.
When adding styles that call the image back in one-by-one, they don't seem to follow any pattern as to when they will start to double up.
I also tried making the image significantly smaller to see if it was a cache issue. Didn't change anything.
Not sure what the deal is with Safari, but apparently:
If the CSS rules that reference the same sprite-sheet are not grouped together, it will request the image more than once. (Although not the full number of times the call appears).
#divOne, #divTwo, #divThree {
background-image: url('IMGURLHERE');
}
This would request the image one time.
#divOne {
background-image: url('IMGURLHERE');
}
#divTwo {
background-image: url('IMGURLHERE');
}
This would request the image twice.
No idea as to why this happens.

CSS background-image giving mixed content warning over SSL

I've tried numerous methods to load my CSS background images over SSL without resulting in the mixed content warning.
On this page for example:
https://www.statcentric.com/login/default.aspx
You can see that the message is coming up.
For the logo (logo.png), I've tried using the protocol-less method like so:
span#logo
{
background: url(//www.statcentric.com/images/logo.png) no-repeat scroll 0 0 transparent;
}
For the background (bg.jpg), I've tried using a relative path like so:
body
{
color: #191919;
background: #f2f2f2 url(../../images/bg.jpg) repeat-x top;
}
However, as you'll see, both of these images are still being flagged as mixed content.
Any help is appreciated!
Have you tried pathing your images from the root? ex. url('/images/bg.jpg')
Depending on your tolerance for older browsers, you might look into making your images inline with base64 encoding; data URIs in other words.
https://en.wikipedia.org/wiki/Data_URI_scheme#CSS
http://www.websiteoptimization.com/speed/tweak/inline-images/
It does make your css files bigger and maintenance harder, so you'll have to weigh the size of css file versus the cost of the SSL request. For small images, I usually find the size of the css file is the better way to go.
The other option I know if two different css files; one for ssl and one for not.

Resources