загрузить gif изображение при загрузке другой страницы с помощью ajax

Question

есть ли способ загрузки изображения GIF во время onclick и одновременно, навигация должна произойти. я попробовал этот способ ..

 $("#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); 
     }); 

}); 

но как о файлах сценарии и вызовах функций фона, связанные с этой страницей?

Answer 1

, что я понял из вашего вопроса, для перенаправления, когда #Videop щелкают и показать загрузки GIF изображения А

$("#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'); 
}); 

Приведенный выше код будет показывать GIF изображение, пока ваша страница не перенаправляется. Теперь у вас не будет головной боли приносить все файлы css и script с этой страницы.

EDIT:

в новой странице Video.aspx добавить это, надеюсь, что это решит вашу проблему

$(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'); 
}); 

Answer 2

Я думаю, что вам нужно, это функция прогресс, и показать ожидающего изображение перед AJAX начинается и скрывается после завершения ajax.

1. Добавить элемент, скрытый в теге тела, который может быть изображением или загрузочным div.
2. Определите функцию.
3. Назовите его до и после ajax.

Вот небольшая демонстрация, надеющаяся помочь вам.

#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); 
    } 
}); 

Вы можете изменить стиль самостоятельно.

jsfiddler не работает, я не могу написать код, извините за это. : D