- 浏览: 13636360 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (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 1176使用开源组件真的可以 ... -
2016十大优秀jQuery插件推荐
2016-08-26 02:24 2261当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时 ... -
jQuery .tmpl() 用法
2016-08-26 02:22 1174参考效果: DEMO 下载: jquery-tmpl-ma ... -
jQuery:从零开始,DIY一个jQuery(2)
2016-08-19 03:06 1011在上篇文章我们简单实 ... -
jQuery:从零开始,DIY一个jQuery(1)
2016-08-19 03:00 941从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅 ... -
Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar
2016-08-18 06:15 1549先看上面图片的效果,下面是代码: .navbar .nav ... -
jQuery: 操作select option方法集合
2016-08-18 06:06 3295每一次操作select的时候,总是要谷歌一下资料,真是太不爽 ... -
jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
2016-08-16 05:31 1201原文:http://www.codeceo.com/arti ... -
jQuery: 选择器(DOM,name,属性,元素)
2016-08-11 01:17 4457出处:http://www.cnblogs.com/star ... -
jQuery: 合并表格中相同文本的相邻单元格
2016-08-01 08:02 1339一、效果 二、代码 <!DOCTYPE ... -
Bootstrap 3: 使用注意box-sizing细节及解决方法
2016-08-01 07:58 1557一、bootstrap样式 在Bootstrap v3.3 ... -
域名详解
2016-07-29 12:51 821域名 域名就是用来唯 ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-20 13:39 2273代码: <link href="http: ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-19 07:12 716代码: <link href=" ... -
jQuery:无限循环两个或者多个事件 click / toggle between two functions
2016-07-19 07:12 1591插件: (function($) { $.fn. ... -
javascript 中面向对象实现 如何继承
2016-07-14 01:01 504上一篇博客已经说了关于javascript中的封装, 其中也 ... -
javascript 中的面向对象实现 如何封装
2016-07-12 12:27 1179javascript 是一门很灵活的语言,也是一门有缺陷的语 ... -
AngularJS jQuery 共存法则
2016-06-14 05:26 3571寻找正确的方法,如何在AngularJS里使用jQuery ... -
七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX
2016-06-04 05:28 1102AngularJS学习列表:七步 ... -
七步从Angular.JS菜鸟到专家(2):Scopes
2016-06-04 05:27 690AngularJS学习列表:七步走 Angular.js 从 ...
相关推荐
NULL 博文链接:https://chen-miao.iteye.com/blog/1496730
要同时大量图片,由于网络、图片大小等因素导致网页加载慢,这种用户体验很差的形式应该避免出现。类似于淘宝的图片预加载功能。 该js文件是为了实现图片预加载或者延迟加载的功能,提高用户体验。
jquery.lazyload图片预加载 调用简单 内有实例
图片预加载特效,
JS javascript 图片 预加载 实现图片的加载
经过自己的整理,能实现图片预加载效果的效果,有效减少带宽的占用,网页图片预加载效果
tempImg.src属性可以在后台加载这张图片到本地缓存实现预加载
通过jQuery预加载图片的方法共1页.pdf.zip
瀑布流 图片预加载 实例
本文实例汇总了js预加载图片方法。分享给大家供大家参考。具体分析如下: 1. 纯CSS: #preload-01 { background: url(http://huoche.7234.cn/images/jb51/mizdkqm5xw2.png) no-repeat -9999px -9999px; } #preload-...
HTML+jquery图片预加载功能,实用于web及移动端
图片预加载对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是...
使用 jquery + css + html,实现图片预加载的效果!
wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip
lazyload图片预加载js文件盒相关示例代码
手机页面预加载效果,一些预加载的效果!酷炫的加载效果
站点实现预加载loading,但指定区域中图片未加载完,则实现自定义小图标,图片加载完后进入真正内容
jquery图片预加载延迟加载 先打开默认图片,随后顺序加载 优化打开速度 提升用户体验 极力推荐
jQuery实现图片预加载,些插件在jquery基础上进行封装。大家可以对插件进行修改。