2015-02-18 3 views
1

Мы хотели бы показать изображение «Загрузка ...», когда страница все еще переносится. Страницы могут стать довольно большими в нашем приложении. Я попытался с отдельной страницей, которая отображает изображение, а затем загружает намеченную страницу, но анимированный GIF просто останавливается.XPages: можно ли очистить HTML?

Можно ли что-то сделать на самой странице? Или есть лучший способ?

Спасибо за ваши комментарии, как всегда!


UPDATE

Вот общая идея моей маленькой страницы переключения:

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom"> 
    <xp:div 
     style="width:84.0px;height:84.0px;position:fixed;top:50%;left:50%;margin-top:0px;margin-left:0px;height:0px;width:0px;z-index:1000" 
     id="AjaxLoader"> 
     <xp:image url="/loading.gif" id="image1"> 
     </xp:image> 
    </xp:div> 
    <xp:scriptBlock id="scriptBlock1"> 
     <xp:this.value><![CDATA[XSP.addOnLoad(function() { 
    var href= getParameterByName("href"); 
    location.href= href; 
});]]></xp:this.value> 
    </xp:scriptBlock> 
</xp:view> 

ответ

0

Загрузка «загрузки» страницы перед чем тот, который вы хотите загрузить это не вариант.

Вы можете создать DIV в своем HTML: один для значка загрузки (например, с id = "loadingIcon"), второй для контента (id = "contentWrapper"). Второй скрыт (CSS style = "display: none").

Определить функцию Javascript так:

function pageLoaded(){ 
    document.getElementById("loadingIcon").style.display = "none"; 
    document.getElementById("contentWrapper").style.display = ""; 
} 

Сценарий называется в OnLoad случае тела, как это:

<body onload="pageLoaded()"> 
... 
</body> 
+0

Спасибо, попробовал, что: я добавил DIV, аналогичный приведенному выше идеи, но ничего не отображается в Firefox, пока вся страница не загружается , Это может быть связано с тем, что страница загружается в iFrame и использует панели вкладок dojo. Я знаю, что есть другие среды веб-сервера, которые поддерживают какой-то флеш(), поэтому как насчет JSF/XPages? Я мог бы попробовать еще раз, с вашей функцией pageLoaded ... :-) –

0

Это не вопрос о среде веб-сервера, но как вы организуете свой код :-)

Сделайте свой подход и немного измените его. Вместо location.href = href - который просто запускает перезагрузку, использует вызов ajax и заменяет ваш загрузочный div. Что-то вроде этого:

<xp:scriptBlock id="scriptBlock1"> 
    <xp:this.value><![CDATA[XSP.addOnLoad(function() { 
var href= getParameterByName("href"); 
$.ajax({ 
    url: "test.html", 
    context: $("#{id:AjaxLoader}"); 
}).done(function(result) { 
    $(this).replace(result); 
}); 
location.href= href; 
});]]></xp:this.value> 
</xp:scriptBlock> 

(содержит опечаток, корректировать по мере необходимости)

+0

Я решил свою проблему по-другому, и это совершенно другой подход. Как я уже сказал, мы используем iframes, а главная страница содержит только одну панель вкладок с 4 вкладками с iframe каждый. Поэтому я помещаю элемент AjaxLoader в верхнее окно, и каждое под-окно проверяет, имеет ли его родитель элемент AjaxLoader. Если это так, он использует его, иначе он создает новый. Чтобы быть более точным, я создаю объект CSJS, который я храню в window.AjaxLoader, и каждый подкадр проверяет, есть ли parent.AjaxLoader. Один элемент, один объект, верхний кадр никогда не перезагружается, поэтому div AjaxLoader всегда доступен. –

+0

Во всяком случае, жаль, что нет флеша() ... –

+0

@ D.Bugger: Не было бы смысла добавлять флеш * поверх JSF/XPages. Но * HttpServletResponse * имеет метод * flush() *, поэтому вы можете создать собственный HTML-вывод и вывести его в браузер. –

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