javascript 在显示 div 之前，是否可以不在隐藏的 div 中加载 iframe？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13437091/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to not load an iframe in a hidden div, until the div is displayed?
提问by riseagainst
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.
基本上，当客户单击链接时显示的隐藏 div。该 div 显示一个 php formail，询问客户有关他/她感兴趣的产品的问题。
Here's the code i found online that works great for me using jquery:
这是我在网上找到的使用 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:
css很简单：
#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:
这是外部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);
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?
问题，如何确保 div 中的这个 iframe 仅在 div 不再隐藏时才加载？
回答by Sampson
Rather than loading the iframewith its srcattribute, load it instead with a data-srcattribute. For its value, provide the eventual location you'd use when the parent divbecomes visible.
与其iframe用它的src属性加载 ，不如用一个data-src属性加载它。对于它的价值，请提供您在父项div可见时使用的最终位置。
<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 iframeattribute data-src, and sets its value to the srcattribute of the iframe, causing it to load.
当您显示 parent 时div，发出一个回调，该回调接受该iframe属性data-src，并将其值设置为 的src属性iframe，从而使其加载。
// 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");
});
});
