Demo:
http://c.atara.net/simple.html
When You click Show 1 and Show 2 on a Desktop Browser the background changes immediately, because I assume, the images are already loaded on the page (cached)
However on an iPad or iPhone, the images don't seem to cache .The background turns white first and there is a pause while each image loads. I think this may have something to do with the images being hosted on Google Drive (they are redirected?).
Can anyone come up with any way to get the images to cache on the mobile browser? I can't host them anywhere else.
I am looking for any solution no matter how crazy-- such as if theres a javascript way to turn the images into base64 and then cache that.
Here is the revelant code
<img id="one" src="http://docs.google.com/uc?id=0ByWN3asD9NWSS3pIOHBTb2MzeVE">
<img id="two" src="http://docs.google.com/uc?id=0ByWN3asD9NWSYlRzdElIMC02VFU">
<script>
$(function(){
$('.show').on('click',function(){
var newid=$(this).data('show');
var showJQ=$('#'+newid);
$('#background,#pictureframe').show();
$('#background').css("background-image", "url('"+showJQ.attr('src')+"')");
})
Thank you!!!
Related
Good morning everyone,
I am using the js plug-in ytplayer on a website to play videos in the background via the API.
This works wonderfully, only I have some problems under ios.
If I use the back button to get back to the main or if my device is locked and the page is still open after unlocking or if I push safari to the background and open it again, the video does not start automatically, I have to do a refresh. On Windows and Android this works fine.
Reloading the page after back I solved, but is there any way to also do a reload when I open Safari with the page already loaded or after my device is unlocked?
Thank you so much in advance, really need your help.
I have an application in backbone.js that displays thousands of images. Based on selecting a folder, the image that belongs to the folder will get displayed by hiding others. But the problem here is as soon as I open the app, the browser starts downloading every image as all images have source even though it is not displayed and thus it slows down the app. I fixed it in chrome and IE by removing the source of images that are not displayed so that the browser doesn't download it(I can add source later when it needs to be displayed by fetching the source from the backbone model). This works well in chrome and IE but not in firefox as firefox doesn't stop downloading the images even if the source is removed after loading the page.
I would really appreciate if anybody could give some suggestions on this to make this work in firefox.
I'am developing a PhoneGap Application. and i have an ajax loader in the application, ie. whenever a ajax request is sent to server a loading animating .gif image appears. I have already developed iPhone and Android versions of the application.
But the problem is when i tried to deploy it in Windows Phone 8 the .gif animation doesn't work. Its not a CSS pre loader, its a simple .gif image. I checked WP8 Wikipedia page and there it clearly says WP8 supports .gif image.
Can somebody point out what's am doing wrong. if its something not possible then can someone please point out any different approaches?. Something simpler. (I don't want to add any 3rd party .js plugins in my app).
Thanks.
Check the property of the gif image.
Build Action should be set to Content
Phonegap on WP7 does not load images
I'm having a bit of trouble using the retina.js script. I'm trying to swap the logo for a retina image on this page:
http://mikeleachcreative.co.uk/comps/fmp-mobile/
The script is included as instructed and there are definitely images included with the required '#2x' extension, you can view these images here to make sure:
http://mikeleachcreative.co.uk/comps/fmp-mobile/images/fmp_mobile_logo.png
add #2x onto the end of the filename to see the high-res version.
When this page is viewed on a retina device, I am still seeing the lower-res image, any help would be greatly appreciated.
Thanks.
It looks like (whenever the #2x image is checked) your server is returning 403 (not authorized). Check the settings on your server. Retina.js requires you to be able to make a HEAD request to the server (not GET or POST).
After a button is clicked to start a process on my web app, I show a small loading gif (animated) that rotates to indicate to the user something is happening. I put the gif img in place of the button like this using JQuery:
$('#btn_holder').html('<img src="images/loading2.gif" style="margin-left:40px; margin-top:7px;" />');
This works great in all browsers (Firefox, IE8, Chrome) except IE7 on a windows server 2003.
In IE, the gif appears but it is not animated. What's going on with IE7? How can I test what the problem is?
Thanks all
Maybe it's a problem with your IE7, (this happened to me before)
To enable animated GIFs, select "Internet Options" from the Tools menu and then click the Advanced tab. Scroll down to the Multimedia section, check the "Play Animations" option and click OK. From now on, you should only see the first frame of each animated GIF that loads.
Remember that IE will need to be restarted for the changes to take effect.
Other than that, there's a couple of solutions here: IE7's inanimate gifs.
Does this happen for all animated gifs or only animated gifs loaded in by Javascript? Try going to the url for the gif and seeing if it is animated then. If it is then instead of loading the image into the button, why not load it in HTML, hide it with CSS visibility:hidden and then unhide it with Javascript?