2014-01-24 2 views
3

Когда я нажимаю кнопку перенаправления, проект asp.net перенаправляет один html-файл, и он показывает пользователю загрузчик (анимированный gif). Затем он перенаправляется на конкретную страницу. Его работы прекрасны.показать анимированный файл gif до загрузки страницы asp при перенаправлении?

Но теперь мне не нужна промежуточная страница переадресации. Когда я нажимаю кнопку «Переадресация», она показывает конкретную страницу asp, а загрузчик (анимированный gif) показывает центр на той же странице, пока он не загрузится. После загрузки страницы - загрузчик (анимированный gif) должен скрываться. Как я могу это сделать?. Дайте образец.

C# Код -

Response.Redirect("Redirecting.html?AvailResults.aspx"); 

Redirecting.html код -

<body> 
<div style='position:absolute;z-index:5;top:45%;left:45%;'> 
    <img id="imgAjax" alt="loading..." title="loading..." src="images/ajax-loading.gif" style="width: 100px; height: 100px" /><br /> <br /> 
</div> 

<script type="text/javascript"> 
    /* <![CDATA[ */ 
    this.focus(); //focus on new window 

    redirect = function() { 
     var querystring = window.location.search.substring(1); //first query string 
     var page = querystring.substring(querystring.indexOf('=') + 1, querystring.length); 
     function toPage() { 
      if (page !== undefined && page.length > 1) { 
       document.write('<!--[if !IE]>--><head><meta http-equiv="REFRESH" content="1;url=' + page + '" /><\/head><!--<![endif]-->'); 
       document.write(' \n <!--[if IE]>'); 
       document.write(' \n <script type="text/javascript">'); 
       document.write(' \n var version = parseInt(navigator.appVersion);'); 
       document.write(' \n if (version>=4 || window.location.replace) {'); 
       document.write(' \n window.location.replace("' + page + '");'); 
       document.write(' document.images["imgAjax"].src = "images/ajax-loading.gif"'); 
       document.write(' \n } else'); 
       document.write(' \n window.location.href="' + page + '";'); 
       document.write(' \n <\/script> <![endif]-->'); 
      } 
     } 
     return { 
      begin: toPage 
     } 
    }(); 

    redirect.begin(); 

    /* ]]> */ 
</script> 
</body> 
+0

Этот код выглядит допотопный! Проверка на IE4! Это вышло в 90-х годах – Ruskin

ответ

1

Проблема здесь вы не можете удалить промежуточный шаг и показать/скрыть свой кок на другой URL (вы бы уже перенаправили к моменту его загрузки). Вам нужна страница для загрузки ajax spinner. Я вижу два варианта:

Вариант 1: вернитесь к тому, как вы это делали (нажмите кнопку перенаправления, перейдите на страницу переадресации со счетчиком, затем перенаправляйтесь в конечный пункт назначения). Это похоже на то, что «вы сейчас покидаете xyz.com» заставки, которые часто используются форумами ...

Вариант 2: добавьте iFrame на страницу перенаправления, чтобы вы могли показать/скрыть счетчик и загрузить пункт назначения (в iframe) одновременно. (Если вы перенаправляетесь на свои собственные страницы в приложении или поддерживаете хост одинаково, вы должны быть в состоянии избежать проблем с несколькими сайтами и гарантировать, что целевые страницы не содержат сценариев прорыва кадров и т. Д.)

что это может выглядеть следующим образом:

<div style='position:absolute;z-index:5;top:45%;left:45%;'> 
    <img id="imgAjax" alt="loading..." title="loading..." src="images/ajax-loading.gif" style="width: 100px; height: 100px" /> 
</div> 

<iframe src="about:blank" id="ifRedir" onload="$('#imgAjax').hide();" style="width:100%;height:100%;border:0px;"</iframe> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#ifRedir').attr('src', location.search.substr(1)); 
    }); 
</script> 

Я думаю, что это всегда лучше для страницы ребенка в кадре, чтобы сказать родительское frameholder, когда он загрузится (вы можете сделать это с помощью window.onload и вызов «родителя».). Без этого типа взаимодействия страница будет загружаться (и скрывать загрузчик), прежде чем все страницы (изображения) будут полностью загружены.

Вы можете избежать этого, удалив код и вместо того, чтобы с помощью:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#ifRedir').attr('src', location.search.substr(1)); 
     setTimeout(function() { $('#imgAjax').hide(); }, 1000); 
    }); 
</script> 
Смежные вопросы