先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图, 这么多小的缩略图标签循环平铺下来,当单击小的图片时,动态加载大的图片显示,就类似于淘宝的商品查看图片。页面上有一个标签: 为了节省流量,加快页面载入速度,先不加载大图,当用户单击小图时,动态加载一张大图显示。 代码如下: function switch_image(im) { document.getElementById('big-image').src=im; } 这种方式在IE6,7外所有的浏览...
当时考虑有三种方法: 1.直接把路径写在js文件里,但如果引用页面路径层级改变就没辙了。 2.写个class,放在主题包里的css文件或者单独创建一个css文件给日期控件专用。但是控件中的其他元素并没有使用class的需要,单独建立相应css文档似乎小题大做。 3.把以上两个方法排除后,自然要采用动态加载图片路径的方法咯。 关键代码如下: 代码如下: //创建一个全局变量保存路径 var imgRootUrl = ""; //获取图片路径所在目录 var strP...
代码如下: 广告代码最后加载 //ad("open",'alert("ddd")'); var JSScript = { inject:function (htmlId,jsCode){ var script = document.createElement("script"); script.text = jsCode; document.getElementById(htmlId).appendChild(script); }, loadeing:function (url,charset,callback){ var script = document.createElement("script"); script.src = url; script.charset = charset; script.loaded= false; script...
在线演示:http://demo.jb51.net/js/JQueryload/index.htm全部代码 代码如下: JQuery - Load #header { margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #eee; } .buttonListArea { float: left; width: 150px; padding-right: 10px; border-right: 1px solid #eee; margin-right: 10px; } .buttonArea { margin: 10px; padding-bottom:20px; } #load_content { float: left; width: 550px; text-align:cen...
代码如下: (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.onreadystatechang...
代码如下: 代码如下: 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.onreadystate...
这几天研究jquery,感受到了该库的强大,而且找到本不错的书 > 这里我只是随便做了下,上面是照片列表和两个按钮,单击小图片下面显示大图片,当点击按钮时可以查看下一页,上一页的图片。 思路: 1、首先建一个照片查看页面viewer.htm,简单布局,上面是小图片和两个按钮,下面是大图片。 2、建一个一般处理程序viewServer.ashx,用来处理照片查看页面的请求。 3、然后当然要用到数据库啦,包括图片的路径,描述等信息...
这时候最好的做法就是按需引入,动态引入组件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 = f...
之前两篇都介绍了,通过动态加载JS文件或者说JS模块,是怎么一步一步实现。 首先是通过同步策略来实现模块加载与回调函数之间进行分离,接着是通过异步策略来实现模块加载与回调函数之间进行分离。 这一篇,主要是为了说说怎么优化异步策略,并且实现了随意加载(非任意顺序加载模块),页面Ready之后加载文件。先接一下上一篇遗留下来的问题 1、页面Ready之后进行加载 2、随意添加模块 进行加载 看第一个问题,这个问题其实还是比...
在上一篇javascript动态加载中,提到了使用同步加载策略这一个方式来实现如 代码如下: Using("jquery"); Using("User"); $("#ID").click(function(){ var user = new User(); user.name = "xx"; user.show(); }); 由于JS是单线程的,所以同步策略带来的坏处不少,比如阻止之后的代码运行、造成浏览器假死等问题。 使用异步策略又难以实现先导包 后使用的效果。只能采用callback的形式来进行,这又不是UsingJS想要实现的,毕竟jQu...
现在也有很多JS动态加载的框架,比如In.js。但是这种并不是我想要的编写方式,我来说说我的想法。 先来一段java代码 代码如下: import Biz.User; User u = new User(); u.show(); 按流程就是导包、实例化、调用。 JS是做不了导包的,或者说代码意义上的导包,一般只是在页面上进行script标签的引入。 那么 先假设需要写成这样 代码如下: Using("User"); var u = new User(); u.show(); 那么,在JS里面可以实现吗? 来一句一句的...
幸运的是,jQuery提供了一个内置的实用函数,$getScript()为我们提供了这样的方法。来实现在网页动态的功能。来看看这个函数的语法: $.getScript(url,callback) 获取url参数所指定的脚本,使用一个GET请求到指定的服务器 Parameters URL()获取脚本文件的URL。 callback (Function)可选函数 调用脚本文件加载后里面的函数 具体实现过程是 从资源加载文本 |如果字符串成功 返回XHR实例,用来获取脚本。 如何使用呢看下面的方法 ...
代码如下: var _gaq = _gaq || []; //如果变量 _gaq 存在,就等于他自己,否则为一个空数组 _gaq.push(['_setAccount', 'UA-24479793-2']); //是个2维数组 _gaq[0] = array(0=>'_setAccount', 1=>'UA-24479793-2');(设置本跟踪代码所对应的Google帐户) _gaq.push(['_trackPageview']); //是个2维数组 _gaq[1] = array(0=>'_trackPageview');(定义按页面跟踪) (function () { var ga = document.createElement('script'); //创建一...
代码如下: $.getScript(url,callback) 这个方法是jquery自身提供的一个用于动态加载js的方法。当网站需要加载大量js时,动态的加载js就是一个比较好的方法,当需要某个功能时再将相应的js加载进来。 但是自己在使用过程中却发现了一些不尽如意的地方。 每次需要执行该功能的时候都会去请求一次这个js,这样不是在帮倒忙嘛? 于是找到Jquery官网的API说明 http://api.jquery.com/jQuery.getScript/ 其实这个方法就是对ajax方法的一...
代码如下: var tree = new Ext.tree.TreePanel({ region:west, title:站点树:, width:200, minSize:150, maxSize:200, iconCls:ux-auth-menu-header-icon, split:true, autoScroll:true, autoHeight:false, collapsible:true, rootVisable:false, //不显示根节点 root:new Ext.tree.TreeNode({ id:root, text:分所, draggable:false, expanded:true }), loader:new Ext.tree.TreeLoader({ dataUrl:treeUtil.html?content.method=g...