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.
Related
I would like to slide my page only after it fully loads.
I use
href="page#a"
and
href="page#b"
however, sections a and b's initial position is not the final position. my page loads charts and data from SPs and it takes a few seconds, making divs a and b go to the lower part of the page. Thanks.
Write your code inside .load()
$( window ).load(function() {
//whatever you write here will get executed when the page is fully loaded
$.ajax({
dataType: 'json',
beforeSend : function() {
console.log('Before Ajax Request Starts !!');
},
success: function(data) {
/*__YOUR CODE GOES HERE
AFTER PAGE LOADS AND AJAX COMPLETES LOADING_
_____code for sliding ______
*/
}
});
});
you can try this one:
$(document).ready(function(){ ... });
or
$(window).load(function(){ ... });
Hello mates just stuck with a problem.
i am using click() and load() function to get my content in a css class
$("#feed").click(function(){
$(".homefeed").load("feedcontainer.php");
$("#elementcontainer").show();
});
$("#news").click(function(){
$(".homefeed").load("n.php");
$("#elementcontainer").show();
});
$("#info").click(function(){
$(".homefeed").load("newinfo.php");
$("#elementcontainer").hide();
});
As you can see when i click a div then i am able to load a php file content in a .homefeed class container and it is working perfectly
all i want to show a loading image..like loading....loading..... before the content loads..
because when i click one of those div then it is loaded into homefeed container perfectly but it is taking some time so i just want to show user some loading image to keep them engaged
any guess how to achieve it now?
thank you.
Try this: $(".homefeed").prepend(response); change to $(".homefeed").html(response)
$("#info").click(function (e) {
$("#loadimg").show();
jQuery.ajax({
type: "POST",
url: "newinfo.php",
dataType:"text",
cache: true,
success:function(response){
$(".homefeed").html(response);
$("#loadimg").hide();
},
});
});
You can use jquery blockUI plugin. jquery blockUI
Use the .beforeSend option in the jQuery AJAX call. Note, that this only works if your AJAX call is asynchronous. If you call it using synchronous, it won't do any animations/queries/callbacks (as jQ is busy blocking everything until your call comes back).
$.ajax({
url: "http://myurl.dot.com.jpeg.image.file.chmtl.php.asp.cfm",
async:false,
cache: false,
beforeSend: function( xhr ) {
// do stuff here to do the 'loading' animation
// (show a dialog, reveal a spinner, etc)
},
done: function(data){
//process response here
}
})
http://api.jquery.com/jquery.ajax/
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
I would like to fade in the images after the images have loaded after the ajax call.
This way the fade actually happens instead of the user watching the image load.
May someone help me out?
Here's the JS snippet:
success: function(data){
$('.main-content').load(function() {
$(data).hide().prependTo('.main-content').fadeIn('slow');
});
return false;
},
Data will come in from php echoing something like this:
<div class='left-col-box'>
<div class='album_image'>
<div class='image_settings'>
<button class='delete_button' id='11'>Delete</button>
</div>
<img src='/includes/thumber.php?file=../img/$next_id.$ext&width=218&height=218' />
</div>
</div>
If 2 images were uploaded, there can be 2 left-col-box strings for 2 loaded boxes.
I would like the image to be loaded before the fadeIn.
loader.show() //show some loading image
$('img',data).load(function(){
loader.hide //hide loader once img is loaded
$(data).prependTo('.main-content');
}
If the data in the success callback is the generated HTML you will need to attach it first then hide it and than fading it in.
Not sure $(data).hide() works as expected as at that point data is not in the DOM yet.
Try the following (I don't think you need load):
success: function(data){
$(data).prependTo('.main-content').find('div.album_image img').hide().fadeIn('slow');
return false;
},
DEMO - Loading image and slowly fading it in, using above code
That above DEMO useds the suggested code and prepends the generated HTML, then finds the image tag, hides it and then slowly fades it in.
Off course if you generate the img tag upfront hidden, for example with a display: none or similar then all you should need is:
$(data).prependTo('.main-content').find('div.album_image img').fadeIn('slow');
The question might be a little misleading as I don't want to know how to open a html document in a div ,but I asked the question as I am currently facing a problem where I can't replace the html file which I have already placed in a div
I have already placed a html file in a div using ajax like this:
$.ajax({
url: 'calender.aspx',//this is html.aspx file
cache: false,
dataType: "html",
success: function (data) {
$(".mainBar").html(data);//mainBar is the div
}
});
this file gets placed on page load i.e document.ready function ,till here everything is fine.....my trouble starts when I want to replace the file,what I do is call a javascript function say replaceFile() on button click and write the same code to replace the file (changing the url of course)
like this
function replaceFile()
{
$.ajax({
url: 'Another.aspx',
cache: false,
dataType: "html",
success: function (data) {
$(".mainBar").html(data);
}
});
}
but this doesn't work,please help me out!
I guess your binding is not working when you try to click on the content you loaded via ajax . So you might want to change the binding of onclick from
$("#someButtonId").click(function(){
replaceFile();
});
to
$(document).on("click","#someButtonId",function(){
replaceFile();
});
jQuery on works with current and future elements.
with this function you will load the page into the element named result
.load( url , data, complete(responseText, textStatus, XMLHttpRequest)] )
function replaceFile(url)
{
$('#result').load(url, function() {
alert('Load was performed.');
});
}
replaceFile('htmlfile.html');
You can load this in Firebug and set a break point at $(".mainBar").html(data); to make sure it's being called. You don't have a failure handler, so it's possible that it's actually receiving an HTTP failure code, not a success code.
I'd also look at the network traffic under the Net tab to see what the request/response looks like. That's an easy way to find out what is really going on with most AJAX calls. IE9 has similar developer tools if you want to use it and not Firefox or Chrome.