Question

我正在尝试加快包含几个iframe的网页的加载速度。这些iframe包含的视频在单击文本时向下滑动并开始播放。我的原始代码有效。

HTML

<span id="clickableText" class="link">click me</span>.<span><iframe id="frame" class="rect" src="iframe.html" scrolling="no" marginwidth=0 marginheight=0></iframe></span>

css有一类＆＃34; rect＆＃34;这基本上是一个崩溃的div和一个＆＃34; open＆＃34;随着过渡而向上滑动。

CSS

.rect{
    float: left;
    height: 0px;
    width: 100%;
    display: block;
    margin: 0px;
    padding: 0px;
    opacity: 0;
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 11.4vw;
    width: 100%;
    opacity: 1;
    display: inline-block;
}

jQuery处理添加和删除类＆＃34;打开＆＃34;播放和暂停视频。

的jQuery

var frame = $("#frame");
var player;

frame.bind("load", function () {
    player = $(this).contents().find("#myVid");
    player.on('ended', function () {
        frame.removeClass("open");    
    });
 });

 $("#clickableText").click(function(){
    if (frame.hasClass("open")) {
        frame.removeClass("open");
        player[0].pause();
  } else {
        frame.addClass("open");
        player[0].play();
  }
 });

无论如何，这是有效的。但是因为我的页面上有一些视频，所以它的加载速度非常慢。所以，在网上看，我发现了一些关于在点击时加载iframe的建议。所以我试图通过添加以下行来修改我的代码：

   frame.attr("src","iframe.html");

在这里：

 $("#clickableText").click(function(){

frame.attr("src","iframe.html");

if (frame.hasClass("open")) {

etc...

当然，还要从html中删除iframe源代码，以便从我的iframe代码中删除这一位：

src="iframe.html"

哪个修复了页面缓慢加载但是...这里是我被卡住的地方。当iframe打开时，您可以看到视频的第一张图片，但它没有播放，也没有声音。尽管如此，页面的加载非常精彩，所以如果我能够让它发挥作用，我就走在正确的轨道上......不用说，任何建议都会受到高度赞赏。

Answer 1

删除html中的iframe src：

<iframe id="frame" class="rect" scrolling="no" marginwidth=0 marginheight=0></iframe>

点击javascript调用源文件：

onClick='document.getElementById("frame").src="iframe.html";'

通过jquery点击或调用源文件：

$("#frame").attr("src", "iframe.html");

Answer 2

您可以将iframe src存储在data属性中，然后点击可点击的文本加载它，如下所示：

    $('#clickableText').on('click', function(e) {
        e.preventDefault();
        $('iframe').each(function() {
          $(this).removeClass('open');
          $(this).attr('src', ' ');
        });         
        var vURL = $(this).find('iframe').data('src');
        $(this).find('iframe').attr('src', vURL).addClass('open');
 });

如果您在同一页面上有多个ifpp，则上面的代码也会循环播放并从当前正在播放的iframe中删除。这种技术适用于具有多个iframe的页面，因为除非单击它们，否则它们都不会加载。至于src的存储设置你的iframe代码如下：

<iframe id="frame" class="rect" data-src="iframe.html" src="" scrolling="no" marginwidth=0 marginheight=0></iframe>

如何修改代码以获取iframe加载onclick

2 个答案: