Как выполнить загрузку GIF при использовании window.location.href при загрузке документа?

Question

У меня есть следующий обработчик событий щелчка, он экспортирует и загружает PDF, но я хочу добавить анимацию GIF во время создания PDF. Это то, что я пробовал до сих пор:

 $("#export_pdf").click(function (e) {
    e.preventDefault();
    $("#ajax_loader").css("display", "");
    var formato = "PDF";
    var url = "/Obras/Export?format=" + formato + "&nombreObra=" + 
    $('#nombre_obra').val();
    window.location.href = url;
    $("#ajax_loader").hide();
});

Но недостаточно показать изображение div, загрузив ajax_loader. Я экспортирую документ в PDF , используя MVC C # и jquery, поэтому я не использую ajax, поэтому я использую window.location.href.

Я пытался это сделать, но у меня это не работает. Если у кого-то есть идеи, я буду очень признателен.

Answer 1

Я не слишком знаком с ajax loader, но в прошлом я использовал jQuery spinner:

html-

    <div id="loaderImportFile" class="loader">
    <div id="loadContent" class="loadContent">
        <p id="spinner" class="spinner">

        </p>
    </div>
</div>

jQuery-

    $(document).ready(function () {

         setSpinner("loaderImportFile");


         $('#importForm').submit(function () {

              $('#loaderImportFile').fadeIn();
         });

        function setSpinner(loaderId) {

            var opts = {
                lines: 12,
                length: 7,
                width: 4,
                radius: 10,
                color: '#000',
                speed: 1,
                trail: 60,
                shadow: false,
                hwaccel: false
          };
          var target = document.getElementById(loaderId);
          var spinner = new Spinner(opts).spin(target);

         }

    });

Вот мой комплект-

    bundles.Add(new ScriptBundle("~/bundles/spin").Include(
            "~/Scripts/spin.js",
            "~/Scripts/spinner.js"));