是否有可能不加载隐藏的div中的iframe，直到div显示？ [英] Is it possible to not load an iframe in a hidden div, until the div is displayed?
问题描述
这里是我在网上找到的代码，对我来说使用jquery非常适合：
< script type =text / javascript>
$ b $（document）.ready（function（）{
$ b $（'。show_hide'）。showHide（{
speed：500， //你想要切换的速度
easing：''，//你想要的动画效果如果你不想要效果，并且你没有包含jQuery UI
changeText， 1，//如果你不想让按钮文本改变，把它设置为0
showText：'REQUEST A QUOTE'，//当div被关闭时显示的按钮文本
hideText：'CLOSE '//当div打开时显示的按钮文本
}）;
}）;
< / script>
css简单：
#slidingDiv，＃slidingDiv_2 {
height：300px;
background-color：＃e2e2e2;
padding：20px;
margin-top：10px;
border-bottom：30px solid＃000000;
display：none;
$ b 以下是外部Java脚本：
（function（$）{
$ .fn.showHide = function（options）{
//插件的默认值
var defaults = {
速度：1000，
缓动：''，
changeText：0，
showText：'显示'，
hideText：'隐藏'
};
var options = $ .extend（defaults，options）;
$（this）.click（function（）{
$（'。toggleDiv'）。slideUp（options.speed，options.easing）;
//这个var存储你点击了哪个按钮
var toggleClick = $（this） ;
//这将读取按钮的rel属性以确定要切换哪个div id
var toggleDiv = $（this）.attr（'rel'）;
//这里我们切换以正确的速度显示/隐藏正确的div并使用哪种宽松效果
$（toggleDiv）.slideToggle（options.speed，op tions.easing，function（）{
//这只会在动画完成后触发
if（options.changeText == 1）{
$（toggleDiv）.is（：visible ）？ toggleClick.text（options.hideText）：toggleClick.text（options.showText）;
}
}）;
返回false;
}）;
};
}）（jQuery）;
现在我相信在这段代码中，即使没有显示，表单也会自动加载。我可能是错的，如果是这样，请纠正我。
问题，如何确保此div内的iframe只会在div不再隐藏？
解决方案与其将 iframe 加载它的 src 属性，加载它而不是 data-src 属性。对于它的值，提供当父母 div 变得可见时使用的最终位置。
< div class =hidden_element>
< iframe data-src =http://msdn.microsoft.com>< / iframe>
< / div>
当您显示父母 div 时，问题一个使用 iframe 属性 data-src 的回调函数，并将其值设置为 src iframe 的属性，导致它载入。
//显示我们的元素，然后调用我们的回调
$（。hidden_element）。show（function（）{
//在新可见元素中查找iframe $ b $ （iframe）。prop（src，function（）{
//将其src属性设置为data-src的值
返回$（this）。数据（src）;
}）;
}）;
演示： http： //jsfiddle.net/bLUkk/
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?
解决方案 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/
这篇关于是否有可能不加载隐藏的div中的iframe，直到div显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
