Question

我现在对整体效果感到满意：点击“显示我”，它会显示一个YT视频，再次点击时 - 视频会隐藏等等。但即使首先加载了网站（和YT视频被隐藏） - 它的所有（Mb）大小都被计算，因为它显示导致网站加载缓慢。我的问题是如何在点击“显示我”元素后加载嵌入的视频（及其大小）。

这就是我所拥有的：

HTML：

<div class="#">
    <span class="#" id="show_me"><i class="icon fa-angle-down"></i>Show Me</span>
    <span class="#" id="shown">
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/#" frameborder="0" allowfullscreen></iframe>
    </span>
</div>

JS：

$(document).ready(function(){
$("#show_me").click(function(){
    $("#shown").toggle();
});
});

CSS：

#shown {
display: none;
}

Answer 1

尝试这样的事情：

HTML：

SELECT day,
       class,
       start_time,
       count,
       kpi1,
       MAX(kpi1) as max_kpi1,
       MIN(kpi1) as min_kpi1,
       AVG(kpi1) as avg_kpi1

FROM table

GROUP BY day

JS：

<div class="#">
    <a href="#" id="show_me"><i class="icon fa-angle-down"></i>Show Me</a>
    <div id="i_frame"></div>
</div>

CSS：

$(document).ready(function(){
    $("#show_me").click(function(e){

        e.preventDefault();

        if ($(this).is(".opened") ) {
            $(this).removeClass("opened");
            $(this).find(".icon").removeClass("fa-angle-up").addClass("fa-angle-down");
            $("#i_frame").hide().html("");

        } else {
            $(this).addClass("opened");
            $(this).find(".icon").removeClass("fa-angle-down").addClass("fa-angle-up");
            $("#i_frame").show().html("<iframe width='100%' height='315' src='https://www.youtube.com/embed/#' frameborder='0' allowfullscreen></iframe>");
        }

    });
});

https://jsfiddle.net/jeremykenedy/fkcnncjm/

如何在触发某些点击事件后加载嵌入的视频。 jQuery的

1 个答案: