实例介绍
【实例简介】通过读取图片头数据 取得图片的高度和宽度，从而实现高速预加载图片效果
【实例截图】
【核心代码】
html代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>img ready demo</title>
<script src="imgReady.js"></script>
<style>
/*demo style*/
body { font:12px 'Microsoft Yahei', Tahoma, Arial; _font-family:Tahoma, Arial; }
a { color:#0259C4; }
a:hover { color:#900; }
.tips { color:#CCC; }
h1 { font-family:'Constantia';}
#path { width:36em; padding:5px; border:2px solid #0259C4; background:#FAFAFA;-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }
#path:focus { background:#FFFFF7; outline:0; }
#submit { padding:5px 10px; border:2px solid #0259C4; background:#0259C4; color:#FFF; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; cursor:pointer; }
#submit.disabled { background:#D7D7D7; color:#ABABAB; border-color:#ABABAB; cursor:default; }
</style>
<script>
/* demo script */
window.onload = function () {
var $ = function (id) {
return document.getElementById(id);
};
var Timer = function (){
this.startTime = (new Date()).getTime();
};
Timer.prototype.stop = function(){
return (new Date()).getTime() - this.startTime;
};
var imgUrl,
checkboxFn,
path = $('path'),
submit = $('submit'),
checkbox = $('checkbox'),
clsCache = $('clsCache'),
status = $('status'),
statusReady = $('statusReady'),
statusLoad = $('statusLoad'),
imgWrap = $('imgWrap');
submit.disabled = false;
submit.onclick = function () {
var that = this,
time = new Timer();
imgUrl = path.value;
status.style.display = 'block';
statusLoad.innerHTML = statusReady.innerHTML = 'Loading...';
// 参数: 图片地址, 尺寸就绪事件, 完全加载事件, 加载错误事件
imgReady(imgUrl, function () {
statusReady.innerHTML = '耗时 ' (time.stop() / 1000) ' 秒. 宽度: ' this.width '; 高度: ' this.height;
checkboxFn();
}, function () {
statusLoad.innerHTML = '耗时 ' (time.stop() / 1000) ' 秒. 宽度: ' this.width '; 高度: ' this.height;
}, function () {
statusLoad.innerHTML = statusReady.innerHTML = '耗时 ' (time.stop() / 1000) ' 秒. 加载错误！';
});
};
clsCache.onclick = function () {
var value = path.value;
path.value = (value.split('?')[1] ? value.split('?')[0] : value) '?' new Date().getTime();
status.style.display = 'none';
imgWrap.innerHTML = '';
return false;
};
checkbox.onclick = checkbox.onchange = checkboxFn = function () {
imgWrap.innerHTML = imgUrl && checkbox.checked ? '<img src="' imgUrl '" />' : '';
};
checkbox.checked = false;
$('down').onclick = function () {
window.open(this.getAttribute('data-href') || this.href);
return false;
}
};
</script>
</head>
<body>
<div class="demoInfo">
<h1>imgReady</h1>
<p class="tips">图片头数据加载就绪事件</p>
<p><strong>下载：</strong></p>
<p><a id="down" data-href="http://goo.gl/KBp5a" href="http://www.planeart.cn/demo/imgReady/imgReady.js">imgReady.js</a></p>
<p><strong>相关文章：</strong></p>
<p><a href="http://www.planeart.cn/?p=1121">再谈javascript图片预加载技术</a></p>
<p><strong>演示：</strong></p>
</div>
<div style="height:40px; line-height:40px;"><input type="text" id="path" value="http://www.planeart.cn/demo/imgReady/vistas24.jpg" /> <input type="button" id="submit" value="加 载" /> <label><input id="checkbox" type="checkbox">显示图片</label>
<a id="clsCache" href="#" style="color:#0259C4;">清空缓存</a><em class="tips">（浏览器会缓存加载过后的图片）</em></div>
<div id="status" style="display:none">
<p><strong>通过文件头信息获取尺寸：</strong> <span id="statusReady"></span><p>
<p><strong>通过加载完毕后获取尺寸：</strong> <span id="statusLoad"></span></p>
</div>
<div id="imgWrap"></div>
<div><script type="text/javascript">document.write('<scr' 'ipt src="http://s86.cnzz.com/stat.php?id=1581115&web_id=1581115" type="text/javascript" charset="gb2312"></sc' 'ript>')</div>
</body>
</html>
imgReady.js代码：
/**
* 图片头数据加载就绪事件 - 更快获取图片尺寸
* @version 2011.05.27
* @author TangBin
* @see http://www.planeart.cn/?p=1121
* @param {String} 图片路径
* @param {Function} 尺寸就绪
* @param {Function} 加载完毕 (可选)
* @param {Function} 加载错误 (可选)
* @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
alert('size ready: width=' this.width '; height=' this.height);
});
*/
var imgReady = (function () {
var list = [], intervalId = null,
// 用来执行队列
tick = function () {
var i = 0;
for (; i < list.length; i ) {
list[i].end ? list.splice(i--, 1) : list[i]();
};
!list.length && stop();
},
// 停止所有定时器队列
stop = function () {
clearInterval(intervalId);
intervalId = null;
};
return function (url, ready, load, error) {
var onready, width, height, newWidth, newHeight,
img = new Image();
img.src = url;
// 如果图片被缓存，则直接返回缓存数据
if (img.complete) {
ready.call(img);
load && load.call(img);
return;
};
width = img.width;
height = img.height;
// 加载错误后的事件
img.onerror = function () {
error && error.call(img);
onready.end = true;
img = img.onload = img.onerror = null;
};
// 图片尺寸就绪
onready = function () {
newWidth = img.width;
newHeight = img.height;
if (newWidth !== width || newHeight !== height ||
// 如果图片已经在其他地方加载可使用面积检测
newWidth * newHeight > 1024
) {
ready.call(img);
onready.end = true;
};
};
onready();
// 完全加载完毕的事件
img.onload = function () {
// onload在定时器时间差范围内可能比onready快
// 这里进行检查并保证onready优先执行
!onready.end && onready();
load && load.call(img);
// IE gif动画会循环执行onload，置空onload即可
img = img.onload = img.onerror = null;
};
// 加入队列中定期执行
if (!onready.end) {
list.push(onready);
// 无论何时只允许出现一个定时器，减少浏览器性能损耗
if (intervalId === null) intervalId = setInterval(tick, 40);
};
};
})();
标签： 预加载 Javascript
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论