现在也有很多JS动态加载的框架,比如In.js。但是这种并不是我想要的编写方式,我来说说我的想法。 先来一段java代码 代码如下:import Biz.User; User u = new User(); u.show(); 按流程就是导包、实例化、调用。 JS是做不了导包的,或者说代码意义上的导包,一般只是在页面上进行script标签的引入。 那么 先假设需要写成这样 代码如下:Using("User"); var u = new User(); u.show(); 那么,在JS里面可以实现吗? 来一句一句的分...
之前两篇都介绍了,通过动态加载JS文件或者说JS模块,是怎么一步一步实现。 首先是通过同步策略来实现模块加载与回调函数之间进行分离,接着是通过异步策略来实现模块加载与回调函数之间进行分离。 这一篇,主要是为了说说怎么优化异步策略,并且实现了随意加载(非任意顺序加载模块),页面Ready之后加载文件。先接一下上一篇遗留下来的问题 1、页面Ready之后进行加载 2、随意添加模块 进行加载 看第一个问题,这个问题其实还是比...
这时候最好的做法就是按需引入,动态引入组件js和样式,文件load完成后调用callback,运行js。代码还是很简便的 1. 判断文件load完成。加载状态ie为onreadystatechange,其他为onload、onerror 代码如下:if(isie){ Res.onreadystatechange = function(){ if(Res.readyState == complete || Res.readyState == loaded){ Res.onreadystatechange = null; callback(); _self.loadedUi[modelName] = true; } } }else{ Res.onload = fu...
这几天研究jquery,感受到了该库的强大,而且找到本不错的书 <<锋利的jquery>> 这里我只是随便做了下,上面是照片列表和两个按钮,单击小图片下面显示大图片,当点击按钮时可以查看下一页,上一页的图片。 思路: 1、首先建一个照片查看页面viewer.htm,简单布局,上面是小图片和两个按钮,下面是大图片。 2、建一个一般处理程序viewServer.ashx,用来处理照片查看页面的请求。 3、然后当然要用到数据库啦,包括图片的...
代码如下:(function (clover) { clover.loadScript = function loadScript(url, callback) { var heads = document.getElementsByTagName(head); if (heads.length == 0) { alert("page must have one head element"); } var head = heads[0]; var script = document.createElement(script); script.type = text/javascript; script.src = url; // most browsers script.onload = callback; // IE 6 & 7 script.onreadystatechange...
代码如下: 代码如下:var otherJScipt = document.createElement("script"); otherJScipt = document.createElement("script"); otherJScipt.setAttribute("type", "text/javascript"); otherJScipt.setAttribute("src", "/xxx.js"); document.getElementsByTagName("head")[0].appendChild(otherJScipt);//追加到head标签内 //判断服务器 if (navigator.userAgent.indexOf("IE") >= 0) { //IE下的事件 otherJScipt.onreadystatec...
在线演示:http://demo.jb51.net/js/JQueryload/index.htm全部代码 代码如下:<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>JQuery - Load</title> <link rel="stylesheet" media="all" type="text/css" href="../CSS/myStyle.css" /> <script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> <style type="text/css"> #header { margin-bottom: 1em...
代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>广告代码最后加载</title> </head> <body> <div id="open"></div> <script> //ad("open",alert("ddd")); var JSScript = { inject:function (htmlId,js...
当时考虑有三种方法: 1.直接把路径写在js文件里,但如果引用页面路径层级改变就没辙了。 2.写个class,放在主题包里的css文件或者单独创建一个css文件给日期控件专用。但是控件中的其他元素并没有使用class的需要,单独建立相应css文档似乎小题大做。 3.把以上两个方法排除后,自然要采用动态加载图片路径的方法咯。 关键代码如下: 代码如下://创建一个全局变量保存路径 var imgRootUrl = ""; //获取图片路径所在目录 var strPa...
先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" onclick="switch_image('1.jpg')"><img src="1.thumb.jpg" /></a> 这么多小的缩略图标签循环平铺下来,当单击小的图片时,动态加载大的图片显示,就类似于淘宝的商品查看图片。页面上有一个标签: <div id="pic-box"><img src="" id="big-image" /></div> 为了节省流量,加快页面载入速度,先不加载大图,当用户单击小图...
为了释放脚本资源,通常在返回后还要一些进行额外的处理。 代码如下:script = document.createElement(script); script.src = http://example.com/cgi-bin/jsonp?q=What+is+the+meaning+of+life%3F; script.id = JSONP; script.type = text/javascript; script.charset = utf-8; // 标签加到head后,会自动加载并运行。 var head = document.getElementsByTagName(head)[0]; head.appendChild(script) 实际上很多流行的JS库都采用...
1. 用在外部CSS文件中加载必须的文件 @importurl(style.css); //只能用在CSS文件中或者style标签中 2. 简单的在页面中加载一个外部CSS文件 document.createStyleSheet(cssFile); 2. 用createElement方法创建CSS的Link标签 varhead=document.getElementsByTagName('HEAD').item(0); varstyle=document.createElement('link'); style.href='style.css'; style.rel='stylesheet'; style.type='text/css'; head.appendChild(style); 下...
如果js文件都比较小,还是一个js好,这样可以减少连接数。下面是4种比较常用的方法,大家可以根据情况选择,最后脚本之家 将会给推荐一个。1、直接document.write 代码如下:<script language="javascript"> document.write("<script src='test.js'><\/script>"); </script> 2、动态改变已有script的src属性 代码如下:<script src='' id="s1"></script> <script language="javascript"> s1.src="test.js" </script> 3、动态创建sc...
在介绍ensure内部的实现之前,让我们先来看看其功能: ensure({ html: "popup.html", javascript: "popup.js", css: "popup.css" }, function() { Popup.show("hello world"); } ); 在这段代码中,ensure首先会确保popup.html、popup.js、popup.css这3个文件的加载,如果都没加载过ensure就会动态加载它们;如果已经加载过了,ensure不会再次加载。在确保这3个文件都加载后,ensure会调用后面的匿名函数,也就是执行Popup.show("he...
代码如下:var Rash=true; var msg=""; function norash() { if (confirm("确定要取消吗")) Rash=false; } function rashit() { setInterval('getrss()',Inttime); } function getrss() { if (Rash==true) { head=document.getElementsByTagName('head').item(0); script=document.createElement('script'); script.src='INCLUDE/AutoUpdate.asp'; script.type='text/javascript'...