Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to not load an iframe in a hidden div, until the div is displayed?

Basically, a hidden div that's shown when a customer clicks on a link. That div displays a php formail that asks the customer questions about the product he/she is interested in.

Here's the code i found online that works great for me using jquery:

<script type="text/javascript">

$(document).ready(function(){


$('.show_hide').showHide({           
    speed: 500,  // speed you want the toggle to happen 
    easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
    changeText: 1, // if you dont want the button text to change, set this to 0
    showText: 'REQUEST A QUOTE',// the button text to show when a div is closed
    hideText: 'CLOSE' // the button text to show when a div is open

}); 


});

</script>

The css is just simple:

#slidingDiv, #slidingDiv_2{
height:300px;
background-color: #e2e2e2;
padding:20px;
margin-top:10px;
border-bottom:30px solid #000000;
display:none;
}

Here's the external java script:

(function ($) {
$.fn.showHide = function (options) {

    //default vars for the plugin
    var defaults = {
        speed: 1000,
        easing: '',
        changeText: 0,
        showText: 'Show',
        hideText: 'Hide'

    };
    var options = $.extend(defaults, options);

    $(this).click(function () { 

         $('.toggleDiv').slideUp(options.speed, options.easing);    
         // this var stores which button you've clicked
         var toggleClick = $(this);
         // this reads the rel attribute of the button to determine which div id to toggle
         var toggleDiv = $(this).attr('rel');
         // here we toggle show/hide the correct div at the right speed and using which easing effect
         $(toggleDiv).slideToggle(options.speed, options.easing, function() {
         // this only fires once the animation is completed
         if(options.changeText==1){
         $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
         }
          });

      return false;

    });

};
})(jQuery);

Now it is my believe that in this code, the form would automatically load, even if not shown. I could be wrong, please correct me if so.

Question, how can i make sure this iframe inside the div would only load when the div is no longer hidden?

like image 717
riseagainst Avatar asked Nov 18 '12 03:11

riseagainst


People also ask

Will iframe load if it is display none?

No, the iFrame's loading and load detection should not be compromised by setting the display to none. CSS is just for style, it has no ability to affect the DOM. Setting display:none on an <img> (or any of its parents) will prevent it from loading.

Can iframe be hidden?

The hidden attribute hides the <iframe> element. You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid. A hidden <iframe> is not visible, but maintains its position on the page.

Do IFrames load asynchronously?

Show activity on this post. One problem we had was that while iframes already do load asynchronously, the main page will not fire OnLoad until the iframe has finished loading too.


1 Answers

Rather than loading the iframe with its src attribute, load it instead with a data-src attribute. For its value, provide the eventual location you'd use when the parent div becomes visible.

<div class="hidden_element">
    <iframe data-src="http://msdn.microsoft.com"></iframe>
</div>

When you show the parent div, issue a callback that takes the iframe attribute data-src, and sets its value to the src attribute of the iframe, causing it to load.

// Show our element, then call our callback
$(".hidden_element").show(function(){
    // Find the iframes within our newly-visible element
    $(this).find("iframe").prop("src", function(){
        // Set their src attribute to the value of data-src
        return $(this).data("src");
    });
});

Demo: http://jsfiddle.net/bLUkk/

like image 149
Sampson Avatar answered Oct 21 '22 00:10

Sampson