在 featherlight.js 中延迟加载 iFrame
Lazy load iFrame in featherlight.js
我想知道是否有办法在运行时延迟加载 featherlight.js 中的 iFrame,而不是在 html 中声明 iFrame?这样,要在页面中加载的 url 可以简单地通过 data 属性或 href 属性指定,而不是让它成为 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 结尾的内容,它就可以正常工作。我正在考虑为 'external' sites/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);
........
}
},
但不确定这是否是正确的方法。任何帮助将不胜感激。
提前致谢。
添加内容过滤器是一个很好的方法。
事实证明,正确执行起来有点困难(至少,如果想避免两次加载内容),所以我添加了 feature in Featherlight v1.2.
我想知道是否有办法在运行时延迟加载 featherlight.js 中的 iFrame,而不是在 html 中声明 iFrame?这样,要在页面中加载的 url 可以简单地通过 data 属性或 href 属性指定,而不是让它成为 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 结尾的内容,它就可以正常工作。我正在考虑为 'external' sites/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);
........
}
},
但不确定这是否是正确的方法。任何帮助将不胜感激。
提前致谢。
添加内容过滤器是一个很好的方法。
事实证明,正确执行起来有点困难(至少,如果想避免两次加载内容),所以我添加了 feature in Featherlight v1.2.