is there any way that loading GIF image while onclick and simultaneously, navigation should happen.
i tried this way..
$("#Videop").click(function ()
{
//till the time the post function below doesn't return the following image will be displayed
tactile.page.getComponent("loadingnext").show();
$.post("http://cloud.netbiscuits.net/1305494/SyngentaMobileStage/aspx/Video.aspx",
function (data)
{
//get the new HTML content
$("#root").html(data);
});
});
but how about the script files and background function calls associated with that page?
what I understood from your question is, to redirect when #Videop is clicked and show a loading GIF image
$("#Videop").click(function ()
{ //till the time the post function below doesn't return the following image will be displayed
tactile.page.getComponent("loadingnext").show();
window.location.href('http://cloud.netbiscuits.net/1305494/SyngentaMobileStage/aspx/Video.aspx');
});
The above code will show the GIF image, until your page is redirected. Now you will not have the head ache of bringing all the css and script files from that page to here.
EDIT:
in your new page Video.aspx add this, hope this will solve your problem
$(document).ready(function(){
//Display your GIF Image
//tactile.page.getComponent("loadingnext").show();
console.log("I'm loading");
});
jQuery(window).load(function () {
//Hide your GIF image
// tactile.page.getComponent("loadingnext").hide();
console.log('page is loaded');
});
I think what you need is a progress function, and show a waiting image before ajax starts, and hide after ajax ends.
Add a element hidden in the body tag, that could be a image or a loading div.
Define a function.
Call it before and after ajax.
Here is a small demo, hopes to help you out.
#loading{display:none;position:absolute;left:50%;top:50%;width:100px;border:1px solid #ccc;}
<div id="loading">loading...</div>
$.progress = function(stop){
if(stop){
$('#loading').hide();
} else {
$('#loading').show();
}
};
$.ajaxSetup({
beforeSend: function(){
$.progress();
}, complete: function(){
$.progress(true);
}
});
You can change the style by yourself.
jsfiddler was down, I can not write code, sorry about that. :D
Related
Here is my code below,
function image_effect(){
$.ajax({
url: "image/image.php",
global: false,
type: "POST",
data: ({my_color:encodeURIComponent($('#my_color').val()),my_size:$('#my_size').val(),g_color1:encodeURIComponent($('#g_color1').val()),format:$('#format').val()}),
cache: false,
beforeSend: function() {
$('.mypreviewArea').html("<img src='images/animated_loading.gif' />");
},
success: function(html) {
$('.mypreviewArea').html(html);
}
});
}
$("#my_size").bind("slider:changed", function (event, data) {
// The currently selected value of the slider
image_effect();
});
Iam trying to generate new image through IM by passing parameters to server page through ajax, this code works fine by displaying loading image before fetching the actual image generated from server page... but some times if the generated time is long... loading image will be displayed only for short duration and it disappears, after waiting for minutes the actual out put image will be shown ...But i want to display loading image till the actual image is shown... there should not be a blank space shown, because people will think that ,Page has stopped loading... how to fix this...?
Try this function work fine:
<div id="loader"> <img id="img-spinner" src="img/ajax-loader.gif" style="position:fixed;left:50%;top:50%;margin-left:-32px;margin-top:-32px;z-index:9999;"/></div>
$(document).ready(function(){
$("#loader").ajaxStart(function() {
$("#loader").show();
}).ajaxStop(function() {
$("#loader").hide();
});});
It looks like you're only loading a snippet of HTML which you dump into the page, replacing the loading, and that snippet actually contains the that loads your real image? In this case, the browser never even begins to load the image until after your success callback is done!
What you want is to add the new HTML with image to the container, but hidden by default. Attach a load event handler to the image you insert and, when the image is loaded, then display it.
I Have a huge php table and i want Load it via AJAX to insert a loading gif to the user.
So i'm very noob with this kind of operation and i make a very simple code to do this task.
Here is my code:
$(document).ready(function() {
$("#tableDiv").html('<center><img src="images/loader.gif" /></center>');
$("#tableDiv").load("regulatoryData.php");
});
This is loading the gif but it is not running, it remains static.
How can i correct it?
Any suggestions?
EDIT: When i drag my image to the browser it animates normally.
EDIT 2: Whit just the
$("#tableDiv").html('<center><img src="images/loader.gif" /></center>');
The gif works fine but when i add the second part its starts to run and just after it stops and remain freezed until the regulatoryData appears
EDIT 3: Actually i checked that is not the gif that is freezing but the entire browser.
Sorry about my english :/
Add at the beginning of <BODY>
<img src="images/loader.gif" style="display:none" />
As a "pre-loader"
I've found that IE stops animating GIFs when you start loading another page. I've solved that in one of my own projects by adding a timeout that refreshes the image source 50 ms after the other page starts loading by just assigning it the same value again. In your case that would look something like this:
$(document).ready(function() {
$("#tableDiv").html('<center><img src="images/loader.gif" /></center>');
setTimeout(function() { $("#tableDiv img").attr("src", "images/loader.gif"); }, 50);
$("#tableDiv").load("regulatoryData.php");
});
I would recommend something like the following:
http://jsfiddle.net/NeFaz/1/
Load
<div id="myid">
</div>
$(document).ready(function() {
$("#load").click(function() {
$('#myid').addClass('loading');
$("#myid").load('http://www.confetti.co.uk/shop/', function () {
$('#myid').removeClass('loading');
});
});
});
#myid {
height: 500px;
width: 500px;
}
#myid.loading {
background-image: url('http://koikoikoi.com/wp-content/uploads/2012/07/RESET.gif');
}
This sets the image as a background of the div, but only when a class is applied. We start without this class.
Upon click the load link, we add the loading class to the div and the bg image will display. The function that is used on load fires upon the load finishing, and removes the class from the div therefore removing the image.
So I've got a basic system set up to reload webcam jpgs at a regular interval, but it's weird to see the file load. I'd rather have one fade into the other or at least wait for the whole image to load before it swaps the other one out.
$(document).ready(function() {
setInterval('updateCamera()',1000);
});
function updateCamera() {
$('#camera').attr('src','cam_1.jpg?'+ new Date().getTime());
}
Here is the site, click on "Live Feed" www.graysonearle.com/frogutopia Any ideas?
You can try something like this
$(document).ready(function() {
setTimeout('updateCamera()',1000); // Just call one time on dom ready using setTimeout()
});
function updateCamera() {
$('#camera').attr('src','cam_1.jpg?'+ new Date().getTime()).load(function() {
updateCamera(); // then call updateCamera() each time after image load complete
});
}
I am developing an app using jquery mobile..
In that i want to show something like progress dialog from one page to another.
I have tried
$.mobile.showPageLoadingMsg();
but it takes a specific amount of time while showing...
Actually my other page loads few graphs so it takes time...
How can we show progress as soon as the graph loads on the other page?
I think You can make use of the events like pagebeforecreate or pagecreatelike
And placing the $.mobile.showPageLoadingMsg() in proper place in the code can place major thing.
$('#aboutPage').live('pagebeforecreate',function(event){
alert('This page was just inserted into the dom!');
});
$('#aboutPage').live('pagecreate',function(event){
alert('This page was just enhanced by jQuery Mobile!');
});
You can go though the follwing like :
http://jquerymobile.com/demos/1.0a3/#docs/api/events.html
Surround it in
$(document).ready(function() { ... }
if you aren't already
If you use AJAX to switch between pages you can do the following:
jQuery.ajaxSetup({
beforeSend: function() {
$('#loadingDiv').show()
},
complete: function(){
$('#loadingDiv').hide()
},
success: function() {}
});
"loadingDiv" is your container with spinner gif image (for example).
have a problem with my ajax code.
I have some links and a content area.
When i click on a link, i hide the content area, load the new data and show the content area again. It works, but when showing the content area, you see the old content for a short time and then it flickers to the new content.
Can i somehow let the loading screen appear for a longer time?
Also the hide function only works the first time i use a link.
jQuery(document).ready(function() {
jQuery('.ajax').click(function(){
var toLoad = jQuery(this).attr('href');
jQuery('#ajax_content').hide('slow',loadContent);
jQuery('#load').remove();
jQuery('#main').append('<span id="load">LOADING...</span>');
jQuery('#load').fadeIn('normal');
function loadContent() {
jQuery('#ajax_content').load(toLoad,'',showNewContent())
}
function showNewContent() {
jQuery('#ajax_content').show('normal',hideLoader());
}
function hideLoader() {
jQuery('#load').fadeOut('normal');
}
return false;
});
});
I have this ajax code from this source
Thanks in advance!
You could try emptying your content element before issuing the AJAX retrieve command:
jQuery(document).ready(function() {
jQuery('.ajax').click(function(){
var toLoad = jQuery(this).attr('href');
jQuery('#ajax_content').hide('slow',loadContent);
jQuery('#load').remove();
jQuery('#main').append('<span id="load">LOADING...</span>');
jQuery('#load').fadeIn('normal');
function loadContent() {
jQuery('#ajax_content').empty().load(toLoad,'',showNewContent())
}
function showNewContent() {
jQuery('#ajax_content').show('normal',hideLoader());
}
function hideLoader() {
jQuery('#load').fadeOut('normal');
}
return false;
});
});
To make the application more robust, you can also use the .queue() methods to build a queue of actions. Then when a user clicks another link while one is already loading, it's easy to cancel.