Có thể không tải khung nội tuyến trong div ẩn, cho đến khi div được hiển thị không?

Question

Về cơ bản, div ẩn được hiển thị khi khách hàng nhấp vào liên kết. div hiển thị một formail php mà hỏi những câu hỏi của khách hàng về sản phẩm anh/cô ấy quan tâm đến

Dưới đây là đoạn code tôi tìm thấy trực tuyến mà làm việc tuyệt vời cho tôi sử dụng 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> 

Các css chỉ là đơn giản:

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

đây là java script bên ngoài:

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

Bây giờ tôi tin rằng trong đoạn mã này, biểu mẫu sẽ tự động tải, ngay cả khi không được hiển thị. Tôi có thể sai, hãy sửa tôi nếu có.

Câu hỏi, làm cách nào tôi có thể đảm bảo iframe này bên trong div sẽ chỉ tải khi div không còn bị ẩn nữa?

Answer 1

Thay vì tải iframe bằng thuộc tính src, hãy tải thuộc tính data-src. Đối với giá trị của nó, hãy cung cấp vị trí cuối cùng bạn sẽ sử dụng khi phụ huynh div hiển thị.

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

Khi bạn hiển thị phụ huynh div, phát hành một callback mà mất iframe thuộc tính data-src, và thiết lập giá trị của nó đến src thuộc tính của iframe, làm cho nó tải.

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