移动端禁止冗余 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