Как я могу использовать загружаемый gif с другой страницы?

Буду очень признателен за помощь в решении этой головоломной проблемы!

  • У нас есть сайт, который размещен на одном сервере.
  • У нас также есть веб-приложение, которое размещено на другом сервере, поскольку оно использует другую технологию (QlikView).

Мы сделали так, чтобы приложение выглядело как часть веб-сайта, используя iFrame для загрузки приложения. Код, который мы использовали для этого, показан ниже:

<iframe src="http://www.application_blah.co.uk" width="1190px" height="900px" style="margin: 17px 0 0 -10px; border:none;" scrolling="no" ></iframe>

Это прекрасно работает. Но приложение загружается добрых 20 секунд. В течение этого времени пользователю предоставляется верхний и нижний колонтитулы веб-сайта, но в остальном он просто пуст. Нет никаких признаков того, что что-то происходит или что приложение загружается.

Приложение имеет загрузочный gif во время загрузки, если вы просматриваете его напрямую, а не через iFram, но оно расположено в верхнем правом углу страницы, поэтому оно полностью вне поля зрения iFrame. Загрузочный gif появляется в div с id="InitialLoader".

У нас нет контроля над кодом приложения (например, для перемещения загружаемого gif). Но мы можем редактировать код на сайте. Мне было интересно, можно ли каким-то образом использовать этот символ загрузки и отображать наш собственный символ загрузки (или тот же самый символ), пока он виден в приложении?

У меня была идея использовать jQuery .load, но я не уверен, что это возможно? Символ загрузки не отображается постоянно, только при загрузке страницы. Я хочу отображать его на нашей веб-странице, когда он загружается конкретным пользователем. Вот пример кода, о котором я думал:

JQuery

    <script>
jQuery(document).ready(function(){
    jQuery("#loading").load('http://www.application_blah.co.uk #InitialLoader');
});
</script>

HTML

<div id="loading"></div>

Я очень открыт для предложений, если есть другие методы! Также было бы неплохо узнать, возможно ли вышеизложенное? Мне сложно протестировать на веб-сайте, так как наше агентство взимает плату, поэтому хочу быть уверенным, прежде чем совершать!

Большое спасибо,

Кэти


iframe jquery qlikview
person Katie7    schedule 07.03.2013    source источник
comment
$('#initialLoader img').load(function(){ //выполнить код для отображения верхнего/нижнего колонтитула? });   -  person John    schedule 07.03.2013

Ответы (3)


arrow_upward
0
arrow_downward

На самом деле вы можете попытаться переместить DIV в самом кадре. DIV «InitialLoader» управляется CSS в Qlikview. Можно отредактировать CSS, чтобы расположить DIV в центре страницы. Затем вы можете отредактировать текст "Загрузка..." на что-то другое в "opendoc.htm".

person Rgonomike    schedule 14.03.2013
comment
Спасибо Ргономике. Мы обнаружили эти файлы и смогли сделать это таким образом. Большое спасибо! - person Katie7; 14.03.2013

arrow_upward
0
arrow_downward

Спасибо, Джон, за ваш пример — здорово видеть его на jsfiddle!

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

Во время загрузки приложения

Пока приложение загружается, div загружаемого контейнера gif на www.application-blah.co.uk выглядит следующим образом:

<div id="InitialLoader">
<img src="working.gif">
<span class=ctx-menu-text">Loading...</span>
</div>

Я хотел бы, чтобы сообщение о загрузке отображалось на www.mysite.com, пока этот div виден на www.application-blah.co.uk.

После завершения загрузки приложения

После загрузки приложения стиль div, содержащего загрузочный gif, изменится на style="display:none", как показано ниже.

<div id="InitialLoader" style="display:none">
<img src="working.gif">
<span class=ctx-menu-text">Loading...</span>
</div>

Я хотел бы, чтобы сообщение о загрузке на www.mysite.com исчезло, когда это произойдет.

Надеюсь, это имеет смысл! Я знаю, что это не идеальный сценарий!

Спасибо еще раз!

Кэти

person Katie7    schedule 07.03.2013
comment
Пожалуйста, посмотрите мой обновленный ответ (извините, переполнение стека заблокировано из дома из-за ошибки интернет-провайдера, поэтому я не смог просмотреть его на выходных). - person John; 11.03.2013

arrow_upward
0
arrow_downward

Хорошо, я считаю, что проблема, с которой вы столкнулись, заключается в том, что вы делаете следующее:

1) Вы загружаете iframe с готовым тегом img...

2) Запрос с помощью jquery, загрузился ли img, или применение к нему атрибута onload не удастся, поскольку тег уже был обработан, и DOM, похоже, не поддерживает эту логику.

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

$(document).ready(function(){
    $('img').attr('src', 'http://onerahi.cabu.school.nz/files/2012/09/goes-12-firstimage-large081701.jpg').load(function() { alert('loaded'); });
}
);

http://jsfiddle.net/7E6zQ/

#

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

http://jsfiddle.net/yNGV7/

$('document').ready(function(){
    var newimg = new Image();
    newimg.src = $('img').attr('src');
    newimg.onload = function() {
         //remove loading msg
        $('.ctx-menu-text').remove();

            //hide the div
        $('#InitialLoader').fadeOut(1000);
    }

    $('img').replaceWith(newimg);
});
person John    schedule 07.03.2013
comment
Спасибо, Джон! Я ответил ниже - извиняюсь за то, что поместил его не в то место, а в этот комментарий! - person Katie7; 07.03.2013