是否有可能直到显示格在一个隐藏的div不加载的iframe,?(Is it possible to

2019-07-03 21:52发布

基本上,当客户点击链接,就会向出一个隐藏的股利。 该div显示PHP FORMAIL,询问有关产品的他/她感兴趣的客户问题。

下面是我在网上找到了那个伟大工程,我使用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的仅仅是简单的:

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

这里的外部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);

现在,这是我认为,在这个代码,表单会自动加载,即使未显示。 我可能是错的,请若有指正。

问题 ,我如何能确保当DIV不再隐藏这个iframe中的div内只会加载?

Answer 1:

而不是加载iframe与其src属性,具有代替加载data-src属性。 对于它的价值,提供当家长,你会使用最终位置的div变为可见。

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

当你告诉父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");
    });
});

演示: http://jsfiddle.net/bLUkk/



文章来源: Is it possible to not load an iframe in a hidden div, until the div is displayed?