js动态加载工具
2023-12-28 14:01:05
简介
工具可以动态加载js、css等界面资源,解决各种客户端静态资源缓存不刷新问题。如果有顺序要求,即可在传值的时候保证顺序即可。
源码
loadResource.js
let pattern = new RegExp(/\.css/, 'ig');
function recursionLoad(urls, flatIndex) {
if (urls.length == flatIndex.index) {
return;
}
let url = urls[flatIndex.index];
flatIndex.index++;
if (pattern.test(url)) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.style = 'text/css';
link.href = url + '?t=' + new Date().getTime();
document.body.appendChild(link);
link.onload = function() {
recursionLoad(urls, flatIndex);
}
} else {
const script = document.createElement('script');
script.src = url + '?t=' + new Date().getTime();
script.async = false;
document.body.appendChild(script);
script.onload = function() {
recursionLoad(urls, flatIndex);
}
}
}
function loadScriptWithTimestamp(urls, callback) {
let flatIndex = {
index: 0
};
recursionLoad(urls, flatIndex);
let interval = setInterval(() => {
if (flatIndex.index == urls.length) {
callback();
clearInterval(interval);
}
}, 500);
}
使用方式
先在需要刷新资源的界面引入工具
<script src="loadResource.js"></script>
然后调用loadScriptWithTimestamp函数
<script>
loadScriptWithTimestamp(urls, function(){
//这里放入需要等待资源加载完成后的js逻辑
})
</script>
文章来源:https://blog.csdn.net/sunboylife/article/details/135265617
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!