Я перезагружаю div каждые 30 секунд, не перезагружая всю страницу, а также пользователь может видеть загружаемое изображение, когда обновление происходит, когда после начала обновления он будет серым фоном и покажет загружаемое изображение, и все работает нормально.
Ниже приведен образ, который я использую, который находится на этом URL-адресе - http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif
<script>
$(document).ready(function(){
// Create overlay and append to body:
$('<div id="overlay"/>').css({
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: $(window).height() + 'px',
opacity:0.4,
background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
}).hide().appendTo('body');
// Execute refresh with interval:
setInterval(refresh, 30 * 1000);
});
</script>
<script>
//Create a refresh function:
function refresh(){
// SHOW overlay
$('#overlay').show();
// Retrieve data:
$.ajax({
url: 'dataInfo.jsp',
type: 'GET',
success: function(data){
// onSuccess take only the container content
var content = $($.parseHTML(data)).filter(".container");
//Replace content inside the div
$('.container').replaceWith(content);
// HIDE the overlay:
$('#overlay').hide();
}
});
}
</script>
И ниже мой div, который я перезаряжаю каждые 30 секунд -
<div class="container">
<!-- some table here -->
</div>
Теперь все работает нормально. Единственная проблема, когда я буду разворачивать этот код в процессе производства, он не будет работать, так как я использую URL-адрес изображения, поскольку это http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif
который будет заблокирован в производстве из-за проблемы с брандмауэром.
Поэтому, чтобы избежать этой проблемы, я загрузил изображение локально в мою папку webapp/resources/img
в моем проекте, и теперь я не уверен, как мне изменить свой код таким образом, чтобы я мог использовать образ из своего локального каталога вместо прямого использования этого URL-адреса?
Я знаю, что мне нужно использовать тег img
но как мне изменить свой код?
Любой пример будет оценен по этому поводу.
Просто замените http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif
absolute
URL-адресом. Измените его на webapp/resources/img/page-loader.gif
. Или вы можете поместить файл в тот же каталог, что и ваша страница, и просто использовать page-loader.gif
, что является relative
URL-адресом.
background: 'lightgray url(/testweb/src/main/webapp/resources/img/page-loader.gif) no-repeat center'
и он не работает для я и я не смогли как-то увидеть изображение, когда я перезапустил сервер .. Что-то не так я делаю наверняка. есть идеи?testweb
папкой в корне вашего веб-приложения?