Preload iFrame с изображением JQuery Dialogue

Я пытаюсь предварительно загрузить эту форму опросаMonkey с предварительно загруженным GIF, пока форма загружается в моем диалоговом окне jQuery. Я не могу заставить это изображение появляться в окне. Он скрывает изображение предварительной загрузки сразу как загрузку iframe. У меня есть следующие библиотеки загружены:Preload iFrame с изображением JQuery Dialogue

JQuery UI 1.10.3
JQuery 1.10.1
jquery_cookie.js
JQuery-щ-1.7.1.custom.css

Javascript:

$(function Modal_Stuff() { 

    $("#sm_e_s").load('https://www.surveymonkey.com/jsEmbed.aspx?sm=lbupQlmGZpFXbo7_2fP7Qwzw_3d_3d', function() { 
    $('#loading').hide(); 
    }); 



    var myPos = { 
    my: "center", 
    at: "left bottom", 
    of: window 
}; 

    var myButton = { 
    Close: function(){$(this).dialog('close'); 
    $.cookie('showDialog', 'false', { expires: 300 }); } 
    }; 

    if ($.cookie('showDialog') === undefined || $.cookie('showDialog') === null || $.cookie('showDialog') != 'false') { 

$("#dialog-modal").dialog({ 
    width: 350, 
    autoOpen: true, 
    autoResize: true, 
    modal: false, 
    resizable: false, 
    draggable: false, 
    show: 'slide', 
    buttons: myButton, 
    position: myPos 


}); 
} 
});

CSS

#loading{ 
display:block; 
position:absolute; 
left:150px; 
top:150px; 
}

HTML

<title>jQuery UI Dialog - Basic modal</title> 
<body> 
    <div id="dialog-modal"> 
    <div id="surveyMonkeyInfo" style="width:300px;font-size:10px;color:#666;margin-top:30px;"><img src='http://info.kinnser.com/rs/kinnser/images/small-rotate.gif' width='32' id="loading" alt='loading' /><iframe id="sm_e_s" src="https://www.surveymonkey.com/jsEmbed.aspx?sm=lbupQlmGZpFXbo7_2fP7Qwzw_3d_3d" width="300" height="350" style="border:0px;padding-bottom:4px;overflow:hidden;" frameborder="0" scrolling='no' allowtransparency="true" ></iframe></div></div> 
    <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> 
</body> 
</html>

источник

2013-07-15 user2109495

Похоже, обратный вызов иногда обжигали до события загрузки закончена, этот обратный вызов иногда работает отличается в некоторых браузерах. Я рекомендую, что в обратном вызове вы проверяете наличие ошибок, а также делаете setTimeout(function, time, lang), чтобы он еще немного подошел к странице, которую нужно вычертить. В качестве примера я сделал jsfiddle, но иногда изображение остается немного больше, чем нужно, это из-за setTimeout(), но вы можете поиграть со временем (миллисекундами) в setTimeout(), чтобы получить лучшую точность, но это изменится в зависимости от скорость конвекции и как быстро компьютер может получить данные, нарисовать их в DOM. Проверьте jsfiddle out, это может быть не лучший способ проверить, была ли страница полностью загружена и отображена, но она может работать, если я найду другой способ сделать, я обязательно отправлю ее.

источник

2013-07-15 20:34:55

Thanks Sam! Я сделаю это. – user2109495

Нет проблем, надеюсь, что это сработает, и, как я сказал, если найду лучшее решение, я отправлю ему хороший день! –

Привет, Сэм, немного изменил его, и теперь он работает так, как я предполагал. Еще раз спасибо за вашу помощь. – user2109495

ответ

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