这里推荐使用jquery图片延迟加载插件jquery.lazyload实现图片延迟加载提高网站打开速度下载地址：http://www.appelsiini.net/download/jquery.lazyload.js一、快速使用篇 1.导入JS插件 代码如下: 2.在你的页面中加入如下的javascript： 代码如下: $("img").lazyload(); 这将会使所有的图片都延迟加载； 二、高级篇详细介绍（不想了解那么多的可以直接绕过） Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟...
而本文所提到的预加载技术主要是让javascript快速获取图片头部数据的尺寸。一段典型的使用预加载获取图片大小的例子： 代码如下: var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if (img.complete) { callback(img.width, img.height); } else { img.onload = function () { callback(img.width, img.height); img.onload = null; }; }; }; 可以看到使用onload的方式必须等待图片加载完毕，其...
看个例子： 代码如下: function addImg(isrc) { var Img = new Image(); Img.src = isrc; Img.onload = function () { document.body.appendChild(Img); } } // 当包含上述代码的页面打开时并不载入 “tt.jpg” ，当点击按钮时候才载入。当载入完成后触发onload事件显示到页面上。如果你是第一次加载 “tt.jpg" 这张图片的话，运行正常。点击按钮加载并显示一张图片，如果重复点击会怎么样呢？ IE、Opera中，除了第一次加载 图...
浏览器为了确保正确执行脚本和呈现布局在浏览器加载和执行完成它之前会完全阻塞页面后续内容的呈现和其他资源的加载。 在页面的加载过程中如果可以做到内容的逐步呈现?，对于良好的用户体验来说是非常重要的。通常我们也会在wondow对象的onload事件处理函数中做一些事情，但由于脚本阻塞加载和呈现的特性这一方面增加了页面载入时间推迟了onload事件的触发，另一方面也延迟了用户所期待的反馈。这就需要我们使用一些方法来让浏览器...
通过使用jquery的lazy loader插件可以实现图片的延迟加载，当网页比较长的时候，会先只加载用户视窗内的图片，视窗外的图片会等到你拖动滚动条至后面才加载，这样有效的避免了因图片过多而加载慢的弊端。 使用lazy loader插件很简单，只要在页面中引入lazy loader插件，然后为页面上的图片调用延迟加载方法就可以了。lazy loader插件的下载地址：http://www.appelsiini.net/projects/lazyload。下面先看看具体的使用方法： 代...
当然，该方法不局限于jQuery的检测，对与任何Javascript变量或函数都是通用的。 当前网页加载jQuery后，jQuery()或$()函数将会被定义，所以检测jQuery是否已经加载存在以下2种方法： 方法1: 代码如下: if (jQuery) { // jQuery 已加载 } else { // jQuery 未加载 } 方法2: 代码如下: if (typeof jQuery == undefined) { // jQuery 未加载 } else { // jQuery 已加载 } 备注: 以上我们通过检测jQuery函数是否已定义，这是一个比...
代码如下: flash download PercentLoaded
为什么写这篇文章？ 1.优化页面很实用的方法，技术实现不难； 2.搜索了相关内容的文章，好像都是用jQuery的方法，可是如果不用jQuery的站长难道就不能用这种方法了么； 3.做技术分享也是在让更多人帮自己测试，因为这个本人木有在项目中实际用到，都是自己琢磨的，所有如果有问题请大家指出，先谢谢了； 4.这个月的博客还没写； 5.刚好木有工作任务，此时不写更待何时... 现在的页面大多都具有的特点 - 内...
代码如下: if(this.isIE) { js.onreadystatechange=function(){if(js.readyState=="loaded" || js.readyState=="complete") callback();} }else{js.onload=function(){callback();}} js.onerror=function(){alert(Not Found (404): +src)}//chrome JS判断脚本是否加载完成 在“按需加载”的需求中，我们经常会判断当脚本加载完成时，返回一个回调函数，那如何去判断脚本的加载完成呢？ 我们可以对加载的 JS 对象使用 onload 来判断...
这是一篇原创翻译文章。原文地址。我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为他可以和主页面并行加载，不会阻塞主页面。当然使用iframe也是有利有弊的：Steve Souders在他的blog里面有阐述：Using Iframes Sparingly:iframe会阻塞主页面的onload事件 主页面和iframe共享同一个连接池 阻塞主页面的onload是这两个问题中最影响性能的方面。一般都是想让onload时间越早触发越好，一方面是用户体验过...
1、$(function(){ $("#a").click(function(){ //adding your code here }); }); 2、$(document).ready(function(){ $("#a").click(function(){ //adding your code here }); }); 3、window.onload = function(){ $("#a").click(function(){ //adding your code here }); } html代码为点击，且页面需要引用jquery的js文件 一般的加载页面时调用js方法如下： window.onload = f...
方法回调:callback方法回调是指当某方法执行完成后,去自动执行指定的另一方法的过程.下面举两个代表性的例子,说说JS世界里的方法回调. 一 对JS脚本文件动态加载,当加载完成后,去回调一个函数 代码如下: /* js动态加载脚本库方法 */ function include_js(file) { var _doc = document.getElementsByTagName('head')[0]; var js = document.createElement('script'); js.setAttribute('type', 'text/javascript'); js.setAttribute...
代码如下: (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...
国外的像基于jQuery的RequireJs，YUI Loader，LabJs，RunJs，国内也有淘宝的SeaJs，豆瓣的DoJs等，这些都是一些十分优秀的模块加载器。但是本文将会向大家介绍一个新的开源的轻量级“多线程”异步模块加载器In.js，In的开发借鉴了Do的一些思路和使用习惯，在此期间感谢@kejun同我的耐心交流，In.js压缩后只有4.77k，不仅小巧而且十分好用。 优点： 按需加载 无阻塞加载 依赖关系管理 颗粒化模块管理 如何使用？ A.引入In.js 代码如...
代码如下： 代码如下: 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...