0%

移动端禁止冗余 js 加载


很多时候,我们希望禁止移动端加载某些元素,简单采用 display:none 来隐藏,依然会加载相应资源,拖慢加载速度。

通过 js 代码设定加载条件,就能真正做到按需加载。

给出两种判断条件:

1
2
3
4
5
6
7
8
9
// 屏宽大于 800 的时候加载 '' 内的语句,如果小于 800,则不加载。
if (screen && screen.width > 800) {
document.write('');
}

// 根据 UA 判断,PC 端时加载 `''` 内的语句,如果小于 800,则不加载。
if( !/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)){
document.write('');
}

这里是一个例子:

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 原始代码 -->
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="/js/src/fireworks.js"></script>

<!-- 修改后代码 -->
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script>
if (screen && screen.width > 800) {
document.write('<script type="text/javascript" src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js"><\/script> <script type="text/javascript" src="/js/custom/fireworks.js"><\/script>');
}
</script>

注意:

  • </script> 需要加上反斜杠 \,变为 <\/script>
  • 多个语句之间无需分隔,但您可以添加空格,以增强可读性,JavaScript 会忽略多个空格。

参考自 Skyarea