javascript - 使用 vanilla js 按需加载脚本文件
问题描述
我使用手风琴或标签。单击选项卡时,我想显示地图或需要加载大型 javascript 文件的内容。
为了在不需要时不加载大 javascript,我只想在单击选项卡时加载它。
我怎样才能做到这一点?我用手风琴和点击事件创建了一个很好的起点。
- 我使用香草 js(纯 javascript - 没有 jQuery)
- 我在网页上使用它(不是 nodejs)
- 如果它适用于现代浏览器我很好(不需要IE)
window.addEventListener('DOMContentLoaded', () => {
document.querySelector('[data-trigger]').addEventListener('click', () => {
console.log('Load script from file');
// CDN example - https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.12.0/mapbox-gl.js
});
});
ul {
list-style: none;
margin: 0;
padding: 0;
}
label {
display: flex;
align-items: center;
}
label:before {
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
width: 24px;
height: 24px;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ h2 label:before {
transform: rotate(90deg);
}
p {
display: none;
}
input[type=checkbox]:checked ~ h2 ~ p {
display: block;
}
<ul>
<li>
<input type="checkbox" id="faq-1">
<h2 data-trigger>
<label for="faq-1">Click to load map</label>
</h2>
<p>Gummies marzipan croissant chupa chups.</p>
</li>
<li>
<input type="checkbox" id="faq-2">
<h2>
<label for="faq-2">Something else</label>
</h2>
<p>Cookie bear claw carrot cake croissant.</p>
</li>
</ul>
解决方案
您可以在按下按钮时动态创建脚本标记并将其添加到文档中。这将触发脚本立即加载。使用onload
回调,您可以在脚本实际加载的那一刻运行您的代码,例如创建地图。
添加{ once: true }
为第三个参数,addEventListener
因为它将确保触发器只能被单击一次,并且不能多次附加脚本。
function createMap() {
const map = new mapboxgl.Map({
...
});
}
window.addEventListener('DOMContentLoaded', () => {
document.querySelector('[data-trigger]').addEventListener('click', () => {
console.log('Load script from file');
const script = document.createElement('script');
script.id = 'mapboxgljs';
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.12.0/mapbox-gl.js'
script.async = true;
script.onload = function() {
console.log('script loaded, you can use it now.');
createMap();
}
document.body.append(script);
}, { once: true }); // Make sure that the button can only be pressed once.
});
推荐阅读
- ruby - Watir 不会下载 PDF,只能在查看器中打开
- linux - Debian 10 上的蓝牙加密狗 BLED112 无法正常工作
- spring-boot - spring-boot RabbitHealthIndicator 在关闭 rabbitmq 连接时返回健康
- java - 如何防止在 mockito 3.x 中模拟类?
- c++ - C++ std::unordered_map 只有在新元素不存在时才插入新元素的最快方法
- sql - 从查看 ORACLE 性能中提取数据
- docker - 在 docker 中调试镜像/生产镜像
- android - 使用 Kotlin 获取 Android 设备的总存储空间
- python - 字典中唯一嵌套值的计数
- javascript - JavaScript,“绑定”是什么意思,而不是“绑定”?document.binde.tagname...?