带进度条的图片预加载效果
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2014年7月10日 17:17:23 星期四
原理:使用两张图片实现:一张小的缩略图,一张大的高清图,将缩略图拉大到高清图的尺寸(这就是模糊的效果),然后加载高清图片,加载完成修改<img>标签的src。
图片加载效果:
<script type="text/javascript"> (function () { var timing = function () { this._timer = null; this._percent = 0; this._isLoading = false; this._isPause = false; this._step = 2; }; timing.prototype = { start: function (url, obj) { var self = this; self._percent = 0; self._loadImg(url); self._timer = setInterval(function () { self._judge(url, obj); self._scroll(); }, 30); }, _pause: function () { this._isPause = true; this._step = 0; }, _restart: function () { this._isPause = false; this._step = 3; }, _scroll: function () { $('.loading-progress').width(this._percent + "%"); this._percent += this._step; }, _loadImg: function (url) { var self = this; var img = new Image(); $(img).load(function () { setTimeout(function () {//模拟加载 self._isLoading = true; }, 2000); }); img.src = url; }, _judge: function (url, obj) { if (this._percent >= 70 && !this._isLoading) { this._pause(); } if (this._percent >= 70 && this._isLoading && this._isPause) { this._restart(); } if (this._percent >= 100) { obj.attr("src", url); this.destroy(); } }, destroy: function () { this._percent = 0; clearInterval(this._timer); $('.loading').hide(); } } if (typeof window.timing == 'undefined' || window.timing == null) { window.timing = new timing(); } })(); </script>
替换图片代码:
$(function () { timing.start('../img/load-image.jpg', $("img").eq(0)); });
Html代码:
<div><img src="../img/load-image-s.jpg" style="width: 409px; height: 307px;" /></div>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2014年7月10日 17:17:23 星期四
相关推荐
首页3D图片轮播效果是一款带预加载进度条,支持鼠标滚轮控制上下页,带图片倒影。
修正 进度条上传图片会创建无效目录的问题,并将图片缓存移至 static 目录 修正 Flash 时钟在 Chrome 浏览器中不能透明(黑色背景)的问题 修正 投票选项组模板不能"自定义"的问题,感谢 仙桃论坛 提交问题 修正 ...
未来考虑解决的问题: 1、对图片进行预载处理 2、与框架 vjbox 整合到一起 未来考虑开发的新控件: 1、滑块调节器(类似windows音量调节器) 2、进度条 3、outlook 菜单 4、树 widgets.js 代码如下:/* * Ucren...
加载进度条v2.0.ec 动 态加载菜单模块1.0版.ec 动态显示窗口.ec 动态类名.ec 动态组件操作模块.ec 动态菜单模块.ec 动态 调整分辩率.ec 动态调用DLL函数.ec 动感图标菜单.ec 动画窗体1.3.ec 匹配指定文本.ec 十六...
加载进度条v2.0.ec 动 态加载菜单模块1.0版.ec 动态显示窗口.ec 动态类名.ec 动态组件操作模块.ec 动态菜单模块.ec 动态 调整分辩率.ec 动态调用DLL函数.ec 动感图标菜单.ec 动画窗体1.3.ec 匹配指定文本.ec 十六...
095 如何在状态栏上加载进度条? 096 如何在状态栏上显示滚动文本? 097 如何在状态栏上显示当前时间? 098 如何在状态栏上显示鼠标当前位置? 099 如何使用代码获取状态栏指针? 第6章 图标与光标 100 如何设置光标? 101...
Java绘制图片火焰效果,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...
Java绘制图片火焰效果,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...
9.4.2 支持上传文件的实时进度条 117 9.5 小结 118 第10章 图文验证模块 119 10.1 概述 119 10.1.1 验证码的作用 119 10.1.2 验证码的原理 119 10.1.3 比较常见的几种验证 方式 120 10.2 最简单的...