PW9.0前端JS开发宝典二:JS延时加载技巧

作者:匿名 hihi 来源:phpwind.net 浏览: 2013-2-1 17:25:20 字号:
[摘要]通常情况下,为了保证页面流畅加载,都是在html文档的底部去JS文件。但实际场景中,由于要模板、插件等,很可能就需要在html文档的中部如引入js文件,这就触发了本文开头所说的“页面阻塞”……但是不用担心,依靠PW9.0里的Wind前端方案,只要懂得使用Wind.ready()的几种使用方法就能确保页面顺畅加载。

  所谓JS延时加载,就是当html文档元素都加载之后再请求JS文件,这样就能防止因JS加载而导致的页面阻塞渲染,也能保证JS文件所以的dom元素已经加载完毕。

  通常情况下,为了保证页面流畅加载,都是在html文档的底部去JS文件。但实际场景中,由于要模板、插件等,很可能就需要在html文档的中部如引入js文件,这就触发了本文开头所说的“页面阻塞”……但是不用担心,依靠PW9.0里的Wind前端方案,只要懂得使用Wind.ready()的几种使用方法就能确保页面顺畅加载。

1. 核心JS文件依赖:

<!doctype html>
<html>
<head></head>
<body>
<div><!--header--></div>
<script>
Wind.ready('global.js', function(){
//等global.js加载完毕后,执行
});
</script>
<div><!--footer--></div>

<script>
Wind.use('jquery', 'global');
</script>
</body>
</html>

  由于"Wind.use('jquery', 'global')"是PW9.0模板的底部都默认加载文件,所以Wind.ready('global.js')能确保html文档、jquery和核心global都已加载完毕,并可以使用。当然了,如果你只是依赖jquery,那么改成Wind.ready('jquery.js', function(){……}) 即可,注意这里的参数只用写JS文件名,不是文件路径。

2. DOM依赖:

<!doctype html>
<html>
<head></head>
<body>
<div><!--header--></div>
<script>
Wind.ready('document', function(){
//等dom ready后就执行
Wind.use('xxx', function(){});
});
</script>
<div><!--footer--></div>

<script>
Wind.use('jquery', 'global');
</script>
</body>
</html>

  如果你的JS不需要依赖jquery、global等其他文件,只要将参数改成“document”,就能确保在html文档加载完毕后就立即执行,而不会等待其他文件的加载。

  • 软件大小:10.18MB
  • 软件类别:国产软件 | 社区论坛
  • 软件语言:简体中文
  • 运行环境:PHP/Mysql
  • 软件授权:免费版
  • 更新时间:2014-7-24 14:29:05
  • 相关链接:Home Page

sssss
Tags: phpwind   phpwind 9.0  
责任编辑:mozi
编辑推荐排行