目前，主要的购物网站都采用了这种加载方式。今天在一个网友的站里发现一个图片延迟加载的插件，很好用，在这里介绍一下。 先介绍一下图片延迟加载原理。我们需要先将图片的真实地址保存在一个自定义的属性中（属性名任你发挥吧，这里我用的是lazy-src），而图片的src属性中用一个占位图片来替代，这个占位图片当然是越小越好，它基本上只干活、不露面。 代码如下: 首先。页面开始加载时浏览器会获取所有图片在当前页面中的位...
之前两篇都介绍了，通过动态加载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 1.4 Animation Techniques》后的总结，有兴趣的朋友可以去看原版书籍。 动画效果对于丰富网站的交互体验起到了不可或缺的作用，他可以让你的站点更酷，更吸引人。 什么时候使用动画： 1.当显示或隐藏页面、弹出框或内容区域的时候； 2.当一些内容从页面的一个地方移动到其他地方的时候； 3.当页面中的一些内容，应用户的操作而产生状态改变的时候； 4.当一些内容在几种状态间转变的...
代码如下: //非延迟加载的函数，每次调用都会进行条件判断 function removeHandler(target,eventType,handler) { if(target.removeEventListener) { target.removeEventListener(eventType,handler,false); }else { target.detachEvent("on"+eventType,handler); } } //延迟加载的函数，第一次调用后，会覆盖原来的老函数，以后再次调用的是新函数，不会再进行条件的判断，提升效率 function addHandler(target,eventType,handler)...
什么是LazyLoad技术？ 在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片，占了几百K的空间。Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的。 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见...
代码如下: function initialize() { addcloud(); //为页面添加遮罩 document.onreadystatechange = subSomething; //监听加载状态改变 } function addcloud() { var bodyWidth = document.documentElement.clientWidth; var bodyHeight = Math.max(document.documentElement.clientHeight, document.body.scrollHeight); var bgObj = document.createElement("div" ); bgObj.setAttribute( id, bgDiv ); bgObj.style.position = "a...
幸运的是，jQuery提供了一个内置的实用函数，$getScript（）为我们提供了这样的方法。来实现在网页动态的功能。来看看这个函数的语法： $.getScript(url,callback) 获取url参数所指定的脚本，使用一个GET请求到指定的服务器 Parameters URL（）获取脚本文件的URL。 callback (Function)可选函数 调用脚本文件加载后里面的函数 具体实现过程是 从资源加载文本 |如果字符串成功 返回XHR实例，用来获取脚本。 如何使用呢看下面的方法 ...
加载动画和进度条在网站和 Web 应用中的使用非常流行。虽然网速越来越快，但是我们的网站越来越复杂，同时用户对网站的使用体验的要求也越来越高。在内容加载缓慢的时候，使用时尚的加载动画和进度条告诉用户还有内容正在加载是一种非常好的方式。今天这篇文章向大家推荐10款基于 jQuery 实现的加载动画和进度条插件。Spin.js 最喜欢这款插件了，动画图片的长度、粗细、速度和角度都可以灵活控制，想要做成什么样都可以。源码下载...
处理HTML DOM文档存在一个难题是，JavaScript可以在DOM完全加载之前执行，这会给你的代码引发不少的潜在问题。浏览器的渲染和操作顺序大致如下列表： HTML解析完毕 外部脚本和样式表加载完毕 脚本在文档内解析并执行 HTML DOM完全构造起来 图片和外部内容加载 网页完成加载 在网页头部并且从外部文件加载的脚本会在HTML真正构造之前执行。如前所述，这是个至关重要的问题，因为这两处执行的脚本并不能访问还不存在的DOM。幸好，我们...
调用页面如下： 代码如下: function MoniAjax1() { $("#iframe1").attr("src", "iframeD.htm"); } function MoniAjax2() { $("#javascriptq").attr("src", "Scripts/scriptD.js"); } iframeD.htm：是字符串就可以了 iframeD.htm scriptD.js：是可以运行的js代码 $("#result").html("Scripts/scriptD.js");JavaScript教程/参考手册 JavaScript热搜 Vue利用canvas实现移动端手写板的方法vue2.0 移动端...
这里是seajs loader的核心部分，有些IE兼容的部分还不是很明白,主要是理解各个模块如何依赖有序加载，以及CMD规范。 代码有点长，需要耐心看： 代码如下: /** * The core of loader */ ;(function(seajs, util, config) { // 模块缓存 var cachedModules = {} // 接口修改缓存 var cachedModifiers = {} // 编译队列 var compileStack = [] // 模块状态 var STATUS = { FETCHING: 1, // The module file is fetching now. 模块正在...
代码如下: 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方法的一...