добавить анимацию загрузки во время замены содержимого

-3

У меня есть веб-страница, созданная на сервере ASP.net, я не могу редактировать исходный код страницы, я могу добавлять только HTML, CSS и Javascript.добавить анимацию загрузки во время замены содержимого

На странице используется старый табличный макет, и весь документ плохо написан.
Я использую jQuery для извлечения всего содержимого страницы (artices, images, links и т. Д.), А затем вставляю их на новую HTML-страницу с помощью jQuery.
Когда страница будет готова, я заменить старую страницу с новым использованием:

var template = "my long HTML page generated by jQuery before this line"; 
var newDoc = document.open("text/html", "replace"); 
newDoc.write(template); 
newDoc.close();

Таким образом, также в <script> тегах, которые есть в моей новой странице будет выполнено правильно, все отлично.

Моя единственная проблема в том, что при замене страницы все становится белым в течение ~ 1 секунды.

Мне нужно избегать этой пустой вспышки, поэтому я хотел бы поместить страницу загрузки во время процесса замены.

NB: Я не использую Ajax, я просто использую jQuery для хранения в переменных содержимого страницы, где работает мой скрипт.

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

Решения?

источник

2013-09-06 PurpleFoxy

это Ajax запрос, что получить/сгенерировать контент? –

Нет, я беру информацию с той же страницы, на которой запущен скрипт – PurpleFoxy

, вы можете создать http://jsfiddle.net –

Вот пример, как вы описали, где нет «белой» вспышки. Я сделал массивный образец html-документа, чтобы преувеличивать вещи. Как только он загрузится, я заменю его загрузочным сообщением, а затем подготовлю новый контент. После того как новый контент будет готов, я заменю старый документ новым, а затем добавлю к нему новый контент. Гладкий и быстрый. Я все еще думаю, что вы делаете это катастрофа, но если вам нужно,

Посмотрите это на хром! here's an example (click here for live demo).

var script = '<script>console.log("New Document script tag is working.");</script>'; 
var newDoc = '<!DOCTYPE html><html><head>'+script+'</head><body></body></html>'; 

var loading = document.createElement('p'); 
loading.innerText = 'Loading...'; 

$(document).ready(function() { 
    var content = $('body').contents(); //the content of the old document body 
    $('body').html(loading); 

    setTimeout(function() { //slow things down for this example 
    for (var i=0, contentLen=content.length; i<contentLen; ++i) { //prepare the new content 
     var text = content[i].innerText; 
     if (text) { 
     text+= ' This text is from the old document, with new stuff added.'; 
     content[i].innerText = text; 
     } 
    } 

    document.open(); //replace doc 
    document.write(newDoc); 
    document.close(); 

    $('body').html(content); //immediately add new content 

    script = document.createElement('script'); 
    script.src = "//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"; 
    script.onload = function() { 
     console.log(angular); 
     console.log('New Library Added.'); 
    }; 
    document.body.appendChild(script); 

    }, 1500); //like I said, this is just to exaggerate the load, ignore it 
});

источник

2013-09-07 03:31:00 m59

спасибо, я уже пробовал это решение, но у меня проблемы, потому что я добавляю на новую страницу некоторые включенные javascript, которые не будут загружаться таким образом. – PurpleFoxy

* вздох *. Еще раз, о чем вы говорите?!? Для вас нет удовлетворительного ответа. Спросите лучшего вопроса, мужик! – m59

извините? в чем проблема? Я спрашиваю что-то, что должно иметь решение, и вопрос довольно ясен. Если вы не знаете ответа, пропустите этот вопрос. – PurpleFoxy

добавить анимацию загрузки во время замены содержимого

ответ

Смежные вопросы