- 浏览: 13730810 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (1994)
- Php / Pear / Mysql / Node.js (378)
- Javascript /Jquery / Bootstrap / Web (435)
- Phone / IOS / Objective-C / Swift (137)
- Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux (335)
- Perl / Koha / Ruby / Markdown (8)
- Java / Jsp (12)
- Python 2 / Wxpython (25)
- Codeigniter / CakePHP (32)
- Div / Css / XML / HTML5 (179)
- WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra (275)
- Apache / VPN / Software (31)
- AS3.0/2.0 / Flex / Flash (45)
- Smarty (6)
- SEO (24)
- Google / Facebook / Pinterest / SNS (80)
- Tools (22)
最新评论
-
1455975567:
xuezhongyu01 写道wocan23 写道我想问下那个 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
xuezhongyu01:
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
18335864773:
试试 pageoffice 在线打开 PDF 文件吧. pag ...
jquery在线预览PDF文件,打开PDF文件 -
青春依旧:
opacity: 0.5; 个人喜欢这种方式!关于其他css特 ...
css透明度的设置 (兼容所有浏览器) -
July01:
推荐用StratoIO打印控件,浏览器和系统的兼容性都很好,而 ...
搞定网页打印自动分页问题
第一种:
<script> function preload(path, img, callback) { for (var i=0; i<img.length; i++) { var src = path + img[i] img[i] = document.createElement("img") img[i].style.display = "none" img[i].onload = function() { document.body.removeChild(this) this.onload = null this.style.display = "" if (!--i) callback(img) } img[i].src = src document.body.appendChild(img[i]) } } onload = function() { preload ( "http://bbs.51js.com/images/smilies/",[ "sweat.gif", "loveliness.gif", "call.gif", "funk.gif"], function (img) { alert('ok') for (var i=0; i<img.length; i++) { document.body.appendChild(img[i]) } } ) } </script>
第二种:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <SCRIPT LANGUAGE="JavaScript"> <!-- var IE=navigator.appName=="Microsoft Internet Explorer"; var Opera=navigator.appName.toLowerCase()=="opera"; var FF=!IE && !Opera; function LoadImage(arrSrc,callBack) { this.Length=arrSrc.length; this.LoadedLen=0; //已经被加载的图片个数 var self=this; if(self.Length<1) { callBack(arrSrc); return; } //经测试,OPERA与别的浏览器加载方式不同,所以特别独立开来... if(Opera) { for(var i=0;i<self.Length;i++) { var tmpImg=new Image(); tmpImg.src=arrSrc[i]; tmpImg.onload=function() { self.LoadedLen++; if(self.LoadedLen==self.Length && callBack) callBack(arrSrc); } } return; } this.Load=function() { self.LoadedLen++; document.getElementById("counter").innerHTML=self.LoadedLen; if(self.LoadedLen<self.Length) self.DownImg(); else if(callBack) callBack(arrSrc); } this.DownImg=function() { var tmpImg=new Image(); tmpImg.src=arrSrc[self.LoadedLen]; if(IE) { if(tmpImg.readyState=="complete") self.Load(); else tmpImg.onreadystatechange=function() { if(this.readyState=="complete") self.Load(); } } else tmpImg.onload=self.Load; } this.DownImg(); } //--> </SCRIPT> </HEAD> <BODY> <div id="counter"></div> <SCRIPT LANGUAGE="JavaScript"> <!-- var arr=['http://www.baidu.com/img/logo.gif','http://www.baidu.com/img/logo.gif','http://www.baidu.com/img/logo.gif']; var t=new LoadImage(arr,function(arr) { var str=""; for(var i=0;i<arr.length;i++) { str+="<img src='"+arr[i]+"' /><br>"; } document.body.innerHTML+=str; }); //--> </SCRIPT> </BODY> </HTML>
第三种:
<!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=gb2312" /> <title>图片批量加载</title> </head> <body> <div id="status" ></div> <div id="processing"></div> <script type="text/javascript"> function $id(id){ return document.getElementById(id);} function $c(tagName){ return document.createElement(tagName);} window.onload = function(){ imageLoad( { url:function(v){ v = []; for(var i=1; i<=100; i++){ v[v.length] = 'http://www.landgame.com.cn/images/game/slg_pic/GifBorder_'+i+'.gif?_='+(new Date).getTime(); } return v; }, oncomplete: function(s){ $id('status').innerHTML = '正在加载...'+s.complete+'/'+s.total; $id('processing').innerHTML = this.src; }, complete:function(imgs, s){ var $r = $c('div'); $r.id = 'result'; $r.innerHTML = '计划加载:'+s.total+', 加载成功:'+s.load+'错误:'+s.error; document.body.appendChild($r); for(var i=0, l=imgs.length, $m; i<l; i++){ $m = $c('div'); $m.innerHTML = (imgs[i].loaded?'加载成功:':'加载失败:')+ imgs[i].src; document.body.appendChild($m); } } }); }; //------------------------------------------------------------------------------------------------------------ function imageLoad( s ){ var urlset = [], undefined, toString = Object.prototype.toString; switch( toString.apply(s.url) ){ case '[object String]': urlset[urlset.length] = s.url; break; case '[object Array]': if(!s.url.length){ return false; } urlset = s.url; break; case '[object Function]': s.url = s.url(); return imageLoad( s ); default: return false; } var imgset =[], r ={ total:urlset.length, load:0, error:0, abort:0, complete:0, currentIndex:0 }, timer, _defaults = { url:'', onload: 'function', onerror: 'function', oncomplete: 'function', ready: 'function', complete: 'function', timeout: 15 }; for( var v in _defaults){ s[v] = s[v]===undefined? _defaults[v]: s[v]; } s.timeout = parseInt( s.timeout ) || _defaults.timeout; timer = setTimeout( _callback, s.timeout*1000); // 生成 image 对象数组 for( var i=0,l=urlset.length,img; i<l; i++){ img = new Image(); img.loaded = false; imgset[imgset.length] = img; } // onload & onerror 绑定 for( i=0,l=imgset.length; i<l; i++){ imgset[i].onload = function(){ _imageHandle.call(this, 'load', i ); }; imgset[i].onerror = function(){ _imageHandle.call(this, 'error', i ); }; imgset[i].onabort = function(){ _imageHandle.call(this, 'abort', i ); }; imgset[i].src = ''+urlset[i]; } // ready 事件回调 if( _isFn(s.ready) ){ s.ready.call({}, imgset, r); } // onload & onerror 句柄 function _imageHandle( handle, index ){ r.currentIndex = index; switch( handle ){ case 'load': this.onload = null; this.loaded = true; r.load++; // onload 事件回调 if( _isFn(s.onload) ){ s.onload.call(this, r); } break; case 'error': r.error++; // onerror 事件回调 if( _isFn(s.onerror) ){ s.onerror.call(this, r); } break; case 'abort': r.abort++; break; } r.complete++; // oncomplete 事件回调 if( _isFn(s.oncomplete) ){ s.oncomplete.call(this, r); } // 判断全局加载 if( r.complete===imgset.length ){ _callback(); } } function _callback(){ clearTimeout( timer ); if( _isFn(s.complete) ){ s.complete.call({}, imgset, r); } } function _isFn(fn){ return toString.apply(fn)==='[object Function]'; } return true; } </script> </body> </html>
链接主题:
javascript图片浏览器的核心——图片预加载
延迟加载图片 Lazy Load
jQuery 页面载入进度条 (必有一款适合你----综合搜集版)
发表评论
-
使用jQuery和Pure.CSS创建一个可编辑的表格
2016-08-26 02:24 1236使用开源组件真的可以 ... -
2016十大优秀jQuery插件推荐
2016-08-26 02:24 2339当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时 ... -
jQuery .tmpl() 用法
2016-08-26 02:22 1221参考效果: DEMO 下载: jquery-tmpl-ma ... -
jQuery:从零开始,DIY一个jQuery(2)
2016-08-19 03:06 1062在上篇文章我们简单实 ... -
jQuery:从零开始,DIY一个jQuery(1)
2016-08-19 03:00 995从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅 ... -
Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar
2016-08-18 06:15 1597先看上面图片的效果,下面是代码: .navbar .nav ... -
jQuery: 操作select option方法集合
2016-08-18 06:06 3351每一次操作select的时候,总是要谷歌一下资料,真是太不爽 ... -
jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
2016-08-16 05:31 1252原文:http://www.codeceo.com/arti ... -
jQuery: 选择器(DOM,name,属性,元素)
2016-08-11 01:17 4515出处:http://www.cnblogs.com/star ... -
jQuery: 合并表格中相同文本的相邻单元格
2016-08-01 08:02 1387一、效果 二、代码 <!DOCTYPE ... -
Bootstrap 3: 使用注意box-sizing细节及解决方法
2016-08-01 07:58 1603一、bootstrap样式 在Bootstrap v3.3 ... -
域名详解
2016-07-29 12:51 863域名 域名就是用来唯 ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-20 13:39 2323代码: <link href="http: ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-19 07:12 765代码: <link href=" ... -
jQuery:无限循环两个或者多个事件 click / toggle between two functions
2016-07-19 07:12 1646插件: (function($) { $.fn. ... -
javascript 中面向对象实现 如何继承
2016-07-14 01:01 548上一篇博客已经说了关于javascript中的封装, 其中也 ... -
javascript 中的面向对象实现 如何封装
2016-07-12 12:27 1229javascript 是一门很灵活的语言,也是一门有缺陷的语 ... -
AngularJS jQuery 共存法则
2016-06-14 05:26 3628寻找正确的方法,如何在AngularJS里使用jQuery ... -
七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX
2016-06-04 05:28 1165AngularJS学习列表:七步 ... -
七步从Angular.JS菜鸟到专家(2):Scopes
2016-06-04 05:27 736AngularJS学习列表:七步走 Angular.js 从 ...
相关推荐
在IT行业中,预加载图片是一项重要的优化技术,特别是在网页设计和开发中,它能提高用户体验,使得图片在用户实际浏览前就已经加载完毕。本话题主要围绕"jQuery 预加载图片"这一主题展开,我们将深入探讨jQuery库...
你可以下载并运行这个示例,观察预加载图片在滚动过程中的动态加载过程,更好地理解其工作原理和使用方法。 总之,jQuery LazyLoad是一个强大的图片预加载工具,通过它我们可以有效地提升网页性能,优化用户体验。...
1. **同步预加载**:使用`<img>`标签的`src`属性预加载图片,这种方式是同步的,会阻塞浏览器的渲染线程,不推荐在主线程中使用。 2. **异步预加载**:通过JavaScript创建`Image`对象并设置其`src`属性,这样可以在...
要同时大量图片,由于网络、图片大小等因素导致网页加载慢,这种用户体验很差的形式应该避免出现。类似于淘宝的图片预加载功能。 该js文件是为了实现图片预加载或者延迟加载的功能,提高用户体验。
在IT行业中,预加载图片是一项重要的优化技术,尤其是在网页设计和开发中,它能提高用户体验,减少用户等待时间。预加载图片是指在用户实际需要之前,利用JavaScript库,如jQuery,预先加载页面中可能需要的图片资源...
在微信小程序开发中,图片预加载是一个非常关键的优化步骤,尤其对于图片密集型的应用,如电商、社交或媒体类应用。预加载技术允许开发者在用户实际需要之前提前下载图片资源,减少用户等待时间,提升用户体验。本篇...
图片预加载技术是一种优化网页性能的方法,主要用于提升用户体验,尤其是对于图像密集型的网站或应用。当用户浏览网页时,预加载技术会提前加载部分或全部未来可能需要的图片资源,这样在用户实际查看这些图片时,...
在这个函数中,`imgArray` 是包含要预加载图片URL的数组,我们为每个URL创建一个新的`Image`对象,并设置其`src`属性,从而触发图片的下载。 接着,我们讨论延迟加载(Lazy Loading)。延迟加载是一种优化策略,它...
以下是一个简单的预加载图片的jQuery示例代码: ```javascript $(document).ready(function() { var images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 图片列表 $.each(images, function(index, ...
总的来说,jQuery图片预加载技术通过提前加载图片资源,提高了网页的响应速度和用户体验。正确理解和应用预加载策略,是现代网页开发中的重要技能。在实际项目中,还需要根据具体需求和性能考虑,灵活选择和优化预...
使用preloadjs 预加载图片,首先需要引入preloadjs库,然后创建一个`PreloadJS`实例。以下是一个基本示例: ```html <script src="path/to/preloadjs.min.js"></script> var queue = new createjs.LoadQueue(); ...
压缩包中的`demo1(图片无序加载).html`可能包含一个预加载图片的示例,可以参考其HTML结构和JavaScript代码来理解预加载的实现过程。此外,`js`文件很可能是用于处理预加载逻辑的JavaScript代码。 7. **图片预加载...
由于浏览器会自动下载`<img>`元素的`src`属性指向的图片,因此,我们可以通过动态创建`<img>`元素并设置其`src`属性,达到预加载图片的目的。同时,为了进一步优化性能,我们可以利用事件监听器监听图片的加载状态,...
JavaScript预加载图片是一种优化网页性能的技术,通过在页面加载时预先加载用户可能需要的图片,以减少用户在后续交互过程中的等待时间。本文将详细解析几种常见的JavaScript预加载图片的方法。 1. **纯CSS预加载**...
在这个实例中,我们将探讨如何实现瀑布流效果,并结合图片预加载技术来提升用户体验。 首先,`style.css`文件通常包含了实现瀑布流布局所需的CSS样式。瀑布流布局的关键在于利用CSS的`float`属性或`display: inline...
总的来说,`jQuery-preloading-with-image`插件简化了预加载图片的实现,通过jQuery的链式操作和丰富的回调机制,使得开发者能够更好地控制图片加载过程,提升网页性能和用户体验。对于那些希望优化图片加载速度,...
tempImg.src属性可以在后台加载这张图片到本地缓存实现预加载
wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip
该插件的工作流程大致如下:当用户打开页面时,jQuery会检测到图片列表,并开始预加载图片。一旦预加载完成,用户可以通过点击左右箭头或者鼠标悬停在图片上来切换幻灯片。控制文字的显示增强了用户对功能的理解,...
在预加载图片的场景中,modernizr.js可以帮助我们判断浏览器是否支持某些特性,比如CSS3的`background-size`属性,这对于图片的预加载和显示至关重要。 接下来,我们来看看jQuery如何实现图片的预加载。预加载是...