如何在移动端不加载不必要的js和动画等


网页特效越来越多,如上期分享的蜂窝特效就是直接引用了大神们的JS,在PC端运行还不错,炫酷,但似乎对移动端就不那么友好了,必竟对于移动端来说:

1、硬件情况并比不上PC端(暂时),运行特效js需要手机GPU很好,但也会发烫
2、屏幕不大、特效太多影响美观,其实由于自适应的原因,特效并没有一直在,所以在白白浪费资源。

所以对于引用的一些js来说,如蜂窝特效:

<script src="canvas-nest.min.js" type="text/javascript"></script>

这样的代码肯定在web和wap端都会加载的,那如何在wap不加载呢?

<script>
if (screen && screen.width >768 ) {
document.write('<script src="canvas-nest.min.js" type="text/javascript"><\/script>');
}
</script>

改成以上形式,即在屏幕宽大于768的时候则加载js,如果低于,那么不加载。

PS:

同样你也可以用其它的判断,比如说判断手机本身android或iphone等等都可以。

再同样你也可以用它去减少许多不需要在移动端运行的动画、事件等等。

如何在移动端不加载不必要的js和动画等