Preload iFrame with Image Jquery Dialogue

StackOverflow https://stackoverflow.com/questions/17660522

سؤال

I'm trying to preload this surveyMonkey form with a preload GIF while the form loads in my jQuery dialog box. I can't get this image to appear in the box. It hides the preload image right away as the iframe loadings. I've got the following libraries loaded:

  1. jquery UI 1.10.3
  2. jquery 1.10.1
  3. jquery_cookie.js
  4. jquery-ui-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>
هل كانت مفيدة؟

المحلول

It looks like the callback sometimes is fired before the load event is finished, this callback sometimes works different under certain browsers. I recomend that in the callback you check for errors and also do a setTimeout(function, time, lang) so that it waits a little more for the page to be drawed. I made a jsfiddle as an example but somethimes the image stays a little more than it should, this is because of the setTimeout(), but you can play around with the time (milliseconds) in setTimeout() to get a better precision but this will change depending on the velocity of the conection and how quickly the computer can get the data a draw it in the DOM. Check the jsfiddle out it may not be the best way to check if the page has been completely loaded and rendered but it could work, if I find another way to do I'll be sure to post it.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top