Czy można załadować element iframe w ukrytym dziale div, dopóki element div nie zostanie wyświetlony?

Question

Zasadniczo ukryty element div, który jest wyświetlany, gdy klient kliknie link. Że div wyświetla formaila php, który zadaje pytania klientów dotyczące produktu on/ona jest zainteresowany

Oto kod znalazłem w internecie, który pracuje dla mnie świetnie przy użyciu 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> 

css tylko prosta:

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

Oto zewnętrzny skrypt java:

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

Teraz uważam, że w tym kodzie forma automatycznie ładuje się, nawet jeśli nie zostanie pokazana. Mogę się mylić, proszę, popraw mnie, jeśli tak.

Pytanie, w jaki sposób mogę się upewnić, że element iframe wewnątrz elementu div zostanie załadowany tylko wtedy, gdy element div nie jest już ukryty?

Answer 1

Zamiast ładowania iframe z jego atrybutem src, należy załadować go zamiast tego za pomocą atrybutu data-src. Dla swojej wartości podaj ostateczną lokalizację, z której korzystasz, gdy rodzic staje się widoczny.

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

Kiedy pokażesz rodzicom div, wydać zwrotnego, które ma atrybut data-srciframe i ustawia jego wartość do atrybutu iframesrc, powodując jej załadować.

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