如何解决带有数据参数的延迟加载外部 Javascript
尝试延迟加载此代码:
<script async src="https://comments.app/js/widget.js?3" data-comments-app-website="TvibSQx_" data-limit="5" data-color="29B127" data-dislikes="1" data-colorful="1"></script>
可以像这样延迟加载外部 JavaScript:
<script type="text/javascript">
window.addEventListener('scroll',function(e) {
var currentScroll = document.scrollingElement.scrollTop;
var telegram_target = document.getElementById('telegram');
if( telegram_target && (currentScroll > telegram_target.getBoundingClientRect().top - 150) ) {
$.getScript("https://comments.app/js/widget.js?3")
}
},false);
</script>
或者可以这样做:
<script type="text/javascript">
window.addEventListener('scroll',function(e) {
var currentScroll = document.scrollingElement.scrollTop;
var telegram_target = document.getElementById('telegram');
if( telegram_target && (currentScroll > telegram_target.getBoundingClientRect().top - 150) ) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://comments.app/js/widget.js?3";
document.getElementsByTagName("head")[0].appendChild(script);
return false;
}
},false);
</script>
但是是否可以使用数据参数延迟加载外部 JavaScript 文件
data-comments-app-website="TvibSQx_" data-limit="5" data-color="29B127" data-dislikes="1" data-colorful="1"
解决方法
您可以使用 setAttribute()
方法向脚本标记添加数据属性,如下所示:
var script = document.createElement("script");
script.setAttribute("data-comments-app-website","TvibSQx_");
或者如果你想使用 jQuery,你可以这样做:
$("<script />",{
"src": "URL"
/* other attributes here */
}).data({
"comments-app-website": "VALUE"
/* more data attributes here */
}).appendTo("head");
**** 更新:这是一个完整的例子。有关 Intersection Observer API
的更多信息/* instantiate observer object */
let observer = new IntersectionObserver(function(entries,observer) {
/* loop through entries on intersection event */
entries.forEach(entry => {
/* if an entry is intersecting */
if (entry.isIntersecting) {
console.log("loading script");
/* remove the observer */
observer.disconnect();
/* create the script tag and append it to the head */
$("<script />",{
"src": "https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js",/* assign id to script element so external script can find it */
"id": "script-tag",/* add data attributes */
"data-comments-app-website": "TvibSQx_","data-limit": "5","data-color": "29B127","data-dislikes": "1"
/* add more attributes here */
}).appendTo("head")
}
});
});
/* assign the observer object to the telegram element */
observer.observe($("#telegram").get(0));
body,html {
padding: 0;
margin: 0;
background: slategray;
font-family: sans-serif;
color: #fff;
text-align: center;
min-height: 100%;
}
.spacer {
padding: 30px;
height: 200vh;
}
#telegram {
padding: 30px;
background: coral;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="spacer">Scroll down to trigger observer</div>
<div id="telegram">Script will load past this point</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。