动态设置iframe的src实现延迟加载问题求助

我看了你的代码，问题出在选择iframe的方式上！你用$(this).find('iframe')，但this指向的是被点击的<a>标签，而iframe是在对应的<section>里，不是a标签的子元素，所以根本找不到iframe，自然没法赋值src。另外，你现在的逻辑也没处理重复点击的情况，可能会重复加载iframe，我给你调整一下代码：

修正后的JavaScript代码 #

$('.index-topic').click(function(e) {
    // 阻止默认页面跳转行为
    e.preventDefault();
    
    // 获取当前点击链接对应的目标section选择器
    const targetSectionSelector = $(this).attr('href');
    const targetSection = $(targetSectionSelector);
    
    // 定位到目标section内的iframe
    const iframe = targetSection.find('.data-embed');
    
    // 仅当iframe未加载过src时，才赋值真实地址
    if (!iframe.attr('src')) {
        iframe.attr('src', iframe.data('src'));
    }
    
    // 切换section的显示状态：激活当前section，隐藏其他兄弟section
    targetSection.addClass('active').siblings().removeClass('active');
});

关键逻辑说明 #

• 正确定位iframe：通过链接的href属性找到对应的section，再在该section内查找iframe，这才是正确的DOM路径；
• 避免重复加载：增加!iframe.attr('src')的判断，确保只有当iframe还未设置src时才赋值，防止重复点击时重复请求资源；
• 保持原有显示逻辑：保留了你原本的section激活/隐藏逻辑，确保点击链接后只显示对应内容。

配套CSS（确保隐藏未激活的section） #

你需要确保非active状态的section是隐藏的，比如：

.index-content {
    display: none;
}
.index-content.active {
    display: block;
}

这样修改后，页面初始化时所有iframe的src为空，不会加载资源；只有当你点击对应链接时，目标section内的iframe才会加载真实的src地址，同时该section显示出来，完美解决页面初始化加载过慢的问题。

内容的提问来源于stack exchange，提问作者jumbo_flan