汇盛国际娱乐:autoIMG 基于jquery的图片自适应插件

时间: 作者:县马

  

[autoIMG,自适应插件]autoIMG 基于jquery的图片自适应插件代码

  为了防止图片撑破布局,最常见的仍然是通过onload后获取图片尺寸再进行调整,所以加载过程中仍然会撑破。而Qzone日志的图片在此进行了改进,onload完毕后才显示原图。我以前用onload写过一个小例子:  
通过imgReady可以跨浏览器在dom ready就可以实现图片自适应,无需等待img加载,代码如下:  
代码如下:
  
// jQuery.autoIMG.js v0.2  
// Tang Bin - - MIT Licensed  
(function ($) {  
var // 设置加载状态的替换图像  
tempPath = './images/loading.png',  
// 设置加载错误的替换图像  
errorPath = './images/error.png',  
// 检测是否支持css2.1 max-width属性  
isMaxWidth = 'maxWidth' in document.documentElement.style,  
// 检测是否IE7浏览器  
isIE7 = !-[1,] && !('prototype' in Image) && isMaxWidth;  
new Image().src = tempPath;  
$.fn.autoIMG = function () {  
var $this = this,  
// 获取容器宽度  
maxWidth = $this.width();  
return $this.find('img').each(function (i, img) {  
// 如果支持max-width属性则使用此,否则使用下面预加载方式  
if (isMaxWidth) return img.style.maxWidth = maxWidth + 'px';  
var path = img.getAttribute('data-src') || img.src,  
next = img.nextSibling,  
parent = img.parentNode,  
temp = new Image();  
// 删除img图像,并替换成loading图片  
img.style.display = 'none';  
img.removeAttribute('src');  
img.parentNode.removeChild(img);  
temp.src = tempPath;  
next ? next.insertBefore(temp) : parent.appendChild(temp);  
// 图片尺寸就绪执行  
imgReady(path, function (width, height) {  
if (width > maxWidth) {  
// 等比例缩放  
height = maxWidth / width * height,  
width = maxWidth;  
// 删除loading图像  
temp.parentNode.removeChild(temp);  
// 恢复显示调整后的原图像  
img.style.display = '';  
img.style.width = width + 'px';  
img.style.height = height + 'px';  
img.setAttribute('src', path);  
next ? next.insertBefore(img) : parent.appendChild(img);  
};  
}, function () {  
// 加载错误  
temp.src = errorPath;  
temp.title = 'Image load error!';  
});  
});  
};  
// 汇盛国际平台 IE7缩放图片会失真,采用私有属性通过三次插值解决  
isIE7 && (function (c,d,s) {s=d.createElement('style');d.getElementsByTagName('head')[0].appendChild(s);s.styleSheet&&(s.styleSheet.cssText+=c)||s.appendChild(d.createTextNode(c))})('img {-ms-interpolation-mode:bicubic}',document);  
// 获取图片头的尺寸数据  
//  
// @param {String} 图片路径  
// @param {Function} 获取尺寸的回调函数 (参数1接收width;参数2接收height)  
// @param {Function} 加载错误的回调函数 (可选)  
var imgReady = function (url, callback, error) {  
var width, height, offsetWidth, offsetHeight, intervalId, check, div,  
accuracy = 1024,  
doc = document,  
container = doc.body || doc.getElementsByTagName('head')[0],  
img = new Image();  
img.src = url;  
// 如果图片被缓存,则直接返回缓存数据  
if (img.complete) {  
return callback(img.width, img.height);  
};  
// 向页面插入隐秘图像,监听图片尺寸就绪状态  
if (container) {  
div = doc.createElement('div');  
div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';  
div.appendChild(img)  
container.appendChild(div);  
width = img.offsetWidth;  
height = img.offsetHeight;  
check = function () {  
offsetWidth = img.offsetWidth;  
offsetHeight = img.offsetHeight;  
// 如果图像尺寸开始变化,则表示浏览器已经获取了图片头数据并占位  
// 经过实测只有监听img.offsetWidth才有效,同时检测img.offsetHeight是为了保险  
// 如果新插入的图片面积大于预设尺寸,很可能是执行前图片以及在其他地方加载中,如基于webkit的浏览器  
if (offsetWidth !== width || offsetHeight !== height || offsetWidth * offsetHeight > accuracy) {  
clearInterval(intervalId);  
callback(offsetWidth, offsetHeight);  
// 清空img的事件与元素,避免IE内存泄漏  
img.onload = null;  
div.innerHTML = '';  
div.parentNode.removeChild(div);  
};  
};  
check();  
// 定期执行检测  
intervalId = setInterval(check, 150);  
};  
// 等待图片完全加载完毕  
// 这是一个保险操作,如果上面的监听尺寸方法失败则会启用此   (责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | 特效插件 | 常用代码 | 样式素材 | 脚本代码 | css特效

Copyright © 2017-2018 汇盛国际 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 汇盛国际平台