动态设置 iframe 的 src 以延迟加载

Question

我有一个包含多个链接和多个 iframe 的页面。我已经设法让iframe正常隐藏，然后在单击相应的链接时变得可见。

但是，由于有相当多的 iframe，我希望它们仅在可见后加载。目前，当页面首次加载时，它们都在加载，使其有点慢。

我试图仅在单击其链接时才填充 iframe 的src，但我似乎无法管理它。我要么不加载它们，要么每次单击任何链接时都加载它们。

<ul>
<li> <a href="#index1" class="index-topic">Topic Name</a> </li>
<li> <a href="#index2" class="index-topic">Topic Name</a> </li>
<li> <a href="#index3" class="index-topic">Topic Name</a> </li>
</ul>
<section id="index1" class="index-content">
<div>
Some text about the topic
</div>
<div>
<iframe class="data-embed" data-src="data-source-URL" src=""></iframe>
</div>
</section>

$('.index-topic').click(function(e) {
//Prevent scrolling of page on click
event.preventDefault();
//This is the section that isn't working:
$(this).find('iframe').attr("src", function() {
return $(this).data("src");
});
//Toggle target tab
$($(this).attr('href')).addClass('active').siblings().removeClass('active');
});

Answer 1

问题是因为你在this上使用find()，它指的是被点击的a，而iframe不是该元素的后代。

要解决此问题，您可以使用单击a的href属性作为选择器。

$('.index-topic').click(function(e) {
e.preventDefault();
let selector = $(this).attr('href');
$(selector).find('iframe').prop("src", function() {
return $(this).data("src");
}).addClass('active').siblings().removeClass('active');
});

<ul>
<li> <a href="#index1" class="index-topic">Topic Name</a> </li>
<li> <a href="#index2" class="index-topic">Topic Name</a> </li>
<li> <a href="#index3" class="index-topic">Topic Name</a> </li>
</ul>
<section id="index1" class="index-content">
<div>
Some text about the topic
</div>
<div>
<iframe class="data-embed" data-src="data-source-URL" src=""></iframe>
</div>
</section>