I'm developing a mobile app that's phonegap powered with jQuery Mobile running. I'm needing the ability to load potentially large images but having the page attempt to load the images on page load without any notification as to that's what it's doing makes the page appear to be unfunctional and broken. So I need to inform the user via a loading image that there is an image being loaded. I tried using this script which I've used in dozens of other web apps but it's not working in jQuery Mobile:
var img = new Image();
// wrap our new image in jQuery, then:
$(img)
// once the image has loaded, execute this code
.load(function () {
// set the image hidden by default
$(this).hide();
// with the holding div #loader, apply:
$('#container')
// remove the loading class (so no background spinner),
// then insert our image
.append(this);
// fade our image in to create a nice effect
$(this).fadeIn();
})
// if there was an error loading the image, react accordingly
.error(function () {
// notify the user that the image could not be loaded
})
// *finally*, set the src attribute of the new image to our image
.attr('src', 'http://somedomain.com/largeimagetobeloaded.png');
As I mentioned this has worked in many other locations with out any problems but I can't seem to get it to load. Fiddler doesn't seem to show any request being fired off by the application and I've tried $('#container').page() and $('#container').trigger('create')
Can anyone give any pointers as to how to load an image via ajax into a div in a jQuery Mobile page?
Related
I have an embedded vimeo video iframe that is blurry upon the page fully loading. On desktop things are usually fine here, but mobile it gets blurry.
How can I prevent the blur on initial load on mobile (normally, it goes away if I click on it or it is fully loaded).
Is there a setting for this with vimeo embeds that I'm missing? Thanks!
Leaving this to help next poor sucker.
In my case this was being cause by using jQuery show() and hide().
I have a single player that I dynamically pass the url and other attributes to.
So I would hide() it, change url, then show() it.
This eliminates the flicker of the video src changing.
It would work, but randomly lock up in that very blurry state, if you clicked on the video enough it would load.
Solved by using fadeTo().
videoUrl = vimeo link.
$('#playerContainer').fadeTo(0, 0); // speed, opacity
$('#yourPlayerIframe').attr('src', videoUrl);
$('#yourPlayerIframe').on("load", function() {
$('#playerContainer').fadeTo('fast', 1);
)};
I have a problem. I bind click events to my "a" tags which hides the contents of the page and shows a loading spinner (until the new page has loaded).
The problem of this approach is that when you click the back button of the browser, the browser recovers the last state of the previous page, where you can only see the loading spinner.
It isn't the same for every browser, but for example on an iPad with the latest Safari this is a problem.
An example of how my code looks like is this:
$("a").click(function() {
showLoadingSpinner(".container", "loading new page...");
// hides the div with the container class and
// shows the loading spinner with the text "loading new page..."
});
Maybe I have to somehow replace all of these requests with some kind of ajax request where I can hide the loading spinner after the request has been completed?
Edit:
I am using ASP.net to build the website (no PHP). It's a really complicated and big application with lots of different types of ajax requests everywhere on the page.
Edit 2:
Just to clarify, I'm talking about "a" tags with "href" attributes.
I am very experienced with jquery, but jquery mobile is very new to me. I am developing an app using cordova and jquery mobile.
So i have a multi page setup in the html, with navigation bars that switch the pages. All works great there, however, i need to load the page content via ajax when the page is changed.
I am managing to do this with a post request to an external web server that generates the content, then caches it inside a local database via the app. I am currently doing this with the "pagebeforeshow" event.
The problem is, when the user clicks the menu item, jquery mobile has already switched the page before the ajax call in "pagebeforeshow" is fired, which means we see a blank page delay while the content is requested.
So my question is: Is there a way to either prevent jquery mobile from switching the page automatically on menu click so that i can catch the event, grab the content and then manually display the page with changePage() or is there an event i can hook into that fires well before the transition takes place?
So the idea is they click the menu item, a full screen loader shows (which works) , load the content and then display the page, not display the page then load the content....
Make sense?
The way I'd go about it would be to not use pagebeforeshow and instead have the page initally covered by a splash screen.
Then when the splash screen is loaded and displayed (image onLoad or similar) start the AJAX call, which once finished, fades out the splash screen and shows the actual content.
I have built a portfolio site which contains an iFrame to display artworks. To display each artwork an html page containing a large image is loaded into the iFrame.
The iFrame is hidden whilst empty (display:none) and is supposed to fade up only when the content is fully loaded.
//pass url of artwork page to iFrame
$("#creativeiframe").attr('src', thisLink.attr('href'));
//fade up iFrame once content loaded
$('#creativeiframe').load(function() {
$('#creativeiframe').fadeIn(300);
});
I had this working as expected - the iFrame would only load up when the content including the large image that had loaded completely, but slow loading prompted me to try preloading the artwork images so they would start downloading before the user clicked to load them into the iFrame.
function preloadImage(url)
{
var img=new Image();
img.src=url;
}
Now I have a problem - sometimes when a user clicks to load an artwork the iFrame will fade up showing a half-loaded image, or worse just showing the html content without the image loaded. I have looked at Chrome Dev Tools Network inspector and this appears to occur when the image in question has started preloading, but not finished.
So my questions are:
Does anyone know why this is happening? Is it because with the preloading there is no network request for the image when the iFrame src is changed, so the .load event doesn't wait for the image to load?
Is there a way I can get the iFrame .load event to wait for the 'half preloaded' image to finish loading before firing?
I got this to work in the end by running a script in the child HTML document to detect the image load. This then triggers a 'fade function' in the parent document which fades up the containing iFrame.
<script type='text/javascript'>
var img = new Image();
img.onload = function(){
window.parent.fadeFn();
}
<?php echo"img.src='".$fileNameVar."'"?>
</script>
There is also a .load() function in the img tag, which can be used to show whether the image is fully loaded or not.
So I think you can use the .load() function to enable/disable the iframe click.
Or show an waiting indicator, maybe better.
EDIT: this is incorrect, I was confused The load event is fired when the DOM is fully loaded, but that doesn't include external images.
You should be able to do what you want with the ready() event:
//no reason to run the jQuery selector multiple times
var creativeIframe = $("#creativeiframe");
//fade up iFrame once content loaded
creativeIframe.ready(function() {
creativeIframe.fadeIn(300);
});
I have a website with a menu, when menu item is clicked I display the page for that menu in an iframe(iframe is set to display home page initially by default). sometimes it could take few seconds to display the page for the selected menu item (for example reports) and I would like to display a loading image while the page is loading. how to do this using javascript or jQuery (sample code will be helpful)? thanks in advance.
Add the loading image to the iframe innerHTML ( or to a div and stop using iframe ) , then use ajax to fetch the new page content , on success iframe innerHTML becomes the content fetched by ajax witch overwrites the loading image . easy to setup but i recomend you stop using iframes
Usually you cannot know when the page finished loading in an iframe. The iframe loading is independent. What you can do is to get the content of the page that you have in the iframe through a ajax get request, and in this way do an animation while you wait for the content.
write a function to show the image and call it when you set the iframe src. when the page is loaded call from within the loaded page a function to hide the image (parent.HideImage)
I think the onload event of the iframe is not supported in all browsers