公共js在页面底部加载的注意事项介绍

JavaScript脚本文件都放在页面底部加载,可以有效地加快页面的加载速度。
但是,php控制器一般这样写:

复制代码 代码如下:

$this->load->view($HEADER);
$this->load->view($MENU);
$this->load->view($VIEW_SHOW, $data);
$this->load->view($FOOTER);

$FOOTER是个共用模版,用于加载js及css文件。
$VIEW_SHOW作为主模版,则可能要单独写些js代码,这些代码通常需要使用公共文件的资源的话,把js写到$FOOTER的后面就不方便了,jQuery的$(document).ready又用不了。这时候,用window.onload就可以了,如下:

复制代码 代码如下:

window.onload = function() {
(function($) {
function test() {alert(123);}
//或写些基于jQuery的绑定什么的
})(jQuery)
};

但如果你想从window.onload外调用里面的函数,比如你想在这个窗口的子iframe中调用parent.test()是不会有结果的。
这时,变通一下,把函数作全局变量就可以了。

复制代码 代码如下:

var test; // 全局作用域的声明
window.onload = function() {
(function($) {
test = function() {alert(123);};
//或写些基于jQuery的绑定什么的
})(jQuery)
};

只在需要时,才把私有的函数改成全局的,是更安全的做法。

时间: 2024-09-28 23:42:40

公共js在页面底部加载的注意事项介绍的相关文章

公共js在页面底部加载的注意事项介绍_javascript技巧

JavaScript脚本文件都放在页面底部加载,可以有效地加快页面的加载速度. 但是,php控制器一般这样写: 复制代码 代码如下: $this->load->view($HEADER); $this->load->view($MENU); $this->load->view($VIEW_SHOW, $data); $this->load->view($FOOTER); $FOOTER是个共用模版,用于加载js及css文件. $VIEW_SHOW作为主模版,

用js判断页面是否加载完成实现代码_基础知识

用document.onreadystatechange的方法来监听状态改变, 然后用document.readyState == "complete"判断是否加载完成 代码如下: 复制代码 代码如下: document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomething() { if(document.readyState == "complete") //当页

javaScript 页面自动加载事件详解

 本篇文章主要是对javaScript页面自动加载事件进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法1: 代码如下:  Window.onload=function(){    Var name=document.getElementById("name").val();//加载HTML,并且加载外部所有所有的引用文件(图片,css样式,js等) }   方法2:需要引入Jquery的 .js文件  代码如下: $(document).ready(function(){

javascript-php页面js css刷新才加载,如何解决?

问题描述 php页面js css刷新才加载,如何解决? 这是A页面 <!DOCTYPE html> <html> <head> <title>选择类别</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href=&quo

javascript-点击超链接后新页面没加载js

问题描述 点击超链接后新页面没加载js 问题是这样:两个页面 A B,A页面有个超链接,点击A页面的超链接后跳转到B页面,但是B页面没加载JS,刷新B页面之后才加载JS,怎样点击超链接之后自动刷新B页面或者自动加载JS,或者我这个B页面无法加载JS是什么原因造成的? 解决方案 a链接跳转到另外一个页面或者在本页面显示都是重新加载的,你的B页面渲染后js不显示要麽是你的js路径没有对,这个好检查,另一个就是你的写法是调用jquery库的,这时候你就得检查了,先加载jquery库文件,然后在加载你自

多种方法实现当jsp页面完全加载完成后执行一个js函数_JSP编程

方法1:如下程序,当页面完全加载后执行openTheIndexPage()方法 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Telecommunications Data Collection System</title> <script t

javascript 广告后加载,加载完页面再加载广告_javascript技巧

先加载完页面再加载广告的原理: 网页打开的顺序都是按页面从上到下的顺序加载完成的,所以要想使广告不影响页面打开速度,就要等页面全部打开完成后,再加载JS代码.等页面加载完再加载广告其实就是将广告的 JS 代码放在页面的底部,等页面内容打开完成后再加载到广告代码,再用页面上预留好的的 DIV 输出广告. 使用方法: 1.将以下代码放置页面中想要放广告的地方 复制代码 代码如下: <div id="myads">载入中-</div> 2.将一下代码放置页面底部,也就

下拉刷新及滚动到底部加载更多的Listview使用

本文主要介绍可同时实现下拉刷新及滑动到底部加载更多的ListView的使用. 该ListView优点包括:a. 可自定义下拉响应事件(如下拉刷新) b.可自定义滚动到底部响应的事件(如滑动到底部加载更多) c.可自定义丰富的样式 d.高效(若下拉样式关闭不会加载其布局,同listView效率一致) e. 丰富的设置. 更多下拉刷新开源项目可见 Android 下拉刷新.底部加载更多开源项目可见 Android 底部加载更多. 示例APK可从这些地址下载:Google Play, 360手机助手,

AngularJs根据访问的页面动态加载Controller的解决方案

这篇文章主要介绍了AngularJs根据访问的页面动态加载Controller的解决方案,需要的朋友可以参考下 用Ng就是想做单页面应用(simple page application),就是希望站内所有的页面都是用Ng的Route,尽量不用location.href,但是这样的webapp好处是很多,但是美中不足的是当你的webapp随着时间的推移,用户变多,功能变得更丰富,controller也变得越来越多,你不得不把所有的controller当作全局模块进行加载,以使得在站内任何一个页面中