JS实现未知图片大小的等比例缩放
JS实现未知图片大小的等比例缩放<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
/*demo style*/
body { font:12px 'Microsoft Yahei', Tahoma, Arial; _font-family:Tahoma, Arial; }
a { color:#0259C4; }
a:hover { color:#900; }
.parentCls { width:680px; padding:10px; margin-top:50px; overflow:hidden; border:1px solid #CCC; }
.parentCls p { padding: 0 8px; }
.parentCls img { border:0 none; }
</style>
</head>
<body>
第二张图片就是没有等比缩放和第一张图对比
<div class="parentCls">
<p><img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" class="autoImg"/></p>
<p><img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" class="autoImg2"/></p>
<p><img src="http://gtms01.alicdn.com/tps/i1/T11LpGFs8jXXb5rXb6-1060-300.jpg" class="autoImg"></p>
<p><img src="http://img04.taobaocdn.com/imgextra/i4/397746073/T2fjl5XA8aXXXXXXXX-397746073.jpg" class="autoImg"/></p>
</div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
/**
* JS实现未知图片大小的等比例缩放
*/
function AutoImg(options) {
this.config = {
autoImg : '.autoImg', // 未知图片dom节点
parentCls : '.parentCls' // 父节点
};
this.cache = {};
this.init(options);
}
AutoImg.prototype = {
init: function(options){
this.config = $.extend(this.config, options || {});
var self = this,
_config = self.config;
$(_config.autoImg).each(function(index,img){
var src = img.src,
parentNode = $(img).closest(_config.parentCls),
parentWidth = $(parentNode).width();
// 先隐藏原图
img.style.display = 'none';
img.removeAttribute('src');
// 获取图片头尺寸数据后立即调整图片
imgReady(src, function (width,height) {
// 等比例缩小
if (width > parentWidth) {
height = parentWidth / width * height,
width = parentWidth;
img.style.width = width + 'px';
img.style.height = height + 'px';
};
// 显示原图
img.style.display = '';
img.setAttribute('src', src);
});
});
}
};
var imgReady = (function(){
var list = [], intervalId = null;
// 用来执行队列
var queue = function(){
for(var i = 0; i < list.length; i++){
list.end ? list.splice(i--,1) : list();
}
!list.length && stop();
};
// 停止所有定时器队列
var stop = function(){
clearInterval(intervalId);
intervalId = null;
}
return function(url, ready, error) {
var onready = {}, width, height, newWidth, newHeight,img = new Image();
img.src = url;
// 如果图片被缓存，则直接返回缓存数据
if(img.complete) {
ready(img.width, img.height);
return;
}
width = img.width;
height = img.height;
// 加载错误后的事件
img.onerror = function () {
error && error.call(img);
onready.end = true;
img = img.onload = img.onerror = null;
};
// 图片尺寸就绪
var onready = function() {
newWidth = img.width;
newHeight = img.height;
if (newWidth !== width || newHeight !== height ||
// 如果图片已经在其他地方加载可使用面积检测
newWidth * newHeight > 1024
) {
ready(img.width, img.height);
onready.end = true;
};
};
onready();
// 完全加载完毕的事件
img.onload = function () {
// onload在定时器时间差范围内可能比onready快
// 这里进行检查并保证onready优先执行
!onready.end && onready();
// IE gif动画会循环执行onload，置空onload即可
img = img.onload = img.onerror = null;
};
// 加入队列中定期执行
if (!onready.end) {
list.push(onready);
// 无论何时只允许出现一个定时器，减少浏览器性能损耗
if (intervalId === null) {
intervalId = setInterval(queue, 40);
};
};
}
})();
$(function(){
new AutoImg({autoImg:'.autoImg',parentCls:'.parentCls'});
});
</script>
</body>
</html>
页:
[1]