Ist es möglich, einen iframe in einem versteckten div nicht zu laden, bis das div angezeigt wird?

Question

Im Grunde ein verstecktes div, das angezeigt wird, wenn ein Kunde auf einen Link klickt. Das div zeigt eine PHP-formail, die die Fragen von Kunden über das Produkt fragt er/sie interessiert ist

Hier ist der Code, den ich online gefunden, die für mich mit Jquery funktioniert gut.

<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> 

Die CSS ist einfach einfach:

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

Hier ist der externe Java-Skript:

(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); 

Nun glaube ich, dass in diesem Code das Formular automatisch geladen wird, auch wenn es nicht angezeigt wird. Ich könnte mich irren, bitte korrigiere mich, wenn es so ist.

Frage, wie kann ich sicherstellen, dass dieser iframe innerhalb der div nur laden würde, wenn die div nicht mehr versteckt ist?

Answer 1

Anstatt das iframe mit seinem src Attribut zu laden, laden Sie es stattdessen mit einem data-src Attribut. Geben Sie für den Wert den endgültigen Standort an, den Sie verwenden möchten, wenn das übergeordnete Element div sichtbar wird.

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

Wenn Sie die Eltern zeigen div, einen Rückruf Problem, das das iframedata-src Attribut nimmt, und setzt den Wert auf das src Attribut der iframe, so dass es zu laden.

// 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/