Question

我是一名前列腺癌组织的志愿者，我们有一个网站，其中嵌入了许多YouTube视频。我们现在有这么多，加载时页面陷入困境，即使每个视频都隐藏在onClick div中。

问题：是否有一种简单的方法可以使div只在点击内容时加载内容？（即，在点击触发之前，页面不会拉入YouTube嵌入？）

这是包含所有视频的网页，点击任意一行，点击点击后我想加载的内容：

以下是每个隐藏div的代码片段：

<p class="subHeader">
  <a onMouseOver="this.style.cursor='pointer';" onclick="toggle_visibility('nov14');$(this).text($(this).text() == '[+] New Drugs in the Prostate Cancer Clinic ' ? '[-] New Drugs in the Prostate Cancer Clinic ' : '[+] New Drugs in the Prostate Cancer Clinic ');">[+] New Drugs in the Prostate Cancer Clinic </a>
</p>
<div id="nov14" style='display:none;'>
  <table width="400" style="background-color:#4f4f4f;border:3px solid #333;" align="center" cellpadding="5" cellspacing="5">
    <tr>
      <td>
        <iframe width="400" height="254" src="//www.youtube.com/embed/XvfzhBrK_SQ" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>    
      </td>
     </tr>
    </table>
</div>

来自this Stack Overflow帖子的回复似乎是正确的，但我不完全确定如何使用上面的编码。我们所有的会员都会非常感谢任何帮助！

Answer 1

您可以为每个视频制作不同的页面。我不知道这是否是您想要的，但如果您将它们全部设为相同，并且每个链接都只使用该视频转到另一个页面，则可以加快加载速度。

Answer 2

如果您需要将HTML存储在DOM中，可以将其保存在textarea中。

警告：我还没有测试过这个。

<script>
function toggle_visibility(var div){
    if(jQuery('#' + div).css('display') == 'none') {
        //show it
        //fetch html from the textarea and load into the lonely div, then show the parent div.
        var htmlFromTextarea = jQuery('#' + div + ' textarea').val();
        jQuery('#' + div + ' div').html(htmlFromTextarea).parent().show(0);
    } else {
        //hide it and clear the div to unload
        jQuery('#' + div).hide(0).find('div').html('');
    }
}
</script>
<p class="subHeader">
    <a onMouseOver="this.style.cursor='pointer';" onclick="toggle_visibility('nov14');$(this).find('.expander').html($(this).find('.expander').html() == '[+]' ? '[-]' : '[+]');">
        <span class="expander">[+]</span> New Drugs in the Prostate Cancer Clinic
    </a>
</p>
<div id="nov14" style='display:none;'>
    <textarea style='display:none;'><table width="400" style="background-color:#4f4f4f;border:3px solid #333;" align="center" cellpadding="5" cellspacing="5">
    <tr>
        <td>
            <iframe width="400" height="254" src="//www.youtube.com/embed/XvfzhBrK_SQ" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>    
        </td>
    </tr>
    </table></textarea>
    <div></div>
</div>

在隐藏的div中加载内容AFTER onclick

2 个答案: