在featherlight.js中延迟加载iFrame

Lazy load iFrame in featherlight.js

本文关键字：延迟加载 iFrame js featherlight      更新时间：2023-12-31

我想知道是否有一种方法可以在运行时在featherlight.js中延迟加载iFrame，而不是在html中声明iFrame？这样，可以简单地通过data属性或href属性指定要加载到页面中的url，而不必使用iFrame声明。例如，不要在我的html文件中声明iFrame，如下所示：

<a class="btn btn-default" href="#" data-featherlight="#fl3">iFrame</a>
 ....
<iframe class="lightbox" src="www.google.com" id="fl3" style="border:none;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" height="281" width="500"></iframe>

我想做这样的事情：

<a href="#" data-featherlight="www.xyz.com"></a>

我确实意识到，如果将上面的URL替换为以.html结尾的内容，效果会很好。我正在考虑为"外部"网站/contant编写另一个内容过滤器。。大致如下：

external: { 
            regex: /[-a-zA-Z0-9@:%._'+~#=]{2,256}'.[a-z]{2,6}'b([-a-zA-Z0-9@:%_'+.~#?&//=]*)/,
            process: function(url) {
                var self = this,
                var $container = $("<iframe id='featherlight-iframe'/>");
                $container.attr('src', url);
                    ........

            }
        },

但不确定这是否是正确的方法。如有任何帮助，我们将不胜感激。

提前谢谢。

添加内容过滤器是一个很好的方法。

事实证明，这比它应该做的要困难一些（至少，如果想避免两次加载内容的话），所以我在Featherlight v1.2中添加了该功能。

相关文章：