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


Posted in Javascript onMarch 12, 2011

为了防止图片撑破布局,最常见的仍然是通过onload后获取图片尺寸再进行调整,所以加载过程中仍然会撑破。而Qzone日志的图片在此进行了改进,onload完毕后才显示原图。我以前用onload写过一个小例子:http://www.planeart.cn/?p=1022
通过imgReady可以跨浏览器在dom ready就可以实现图片自适应,无需等待img加载,代码如下:

// jQuery.autoIMG.js v0.2 
// Tang Bin - http://planeArt.cn/ - 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); 
// 获取图片头的尺寸数据 
// http://www.planeart.cn/?p=1121 
// @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); 
}; 
// 等待图片完全加载完毕 
// 这是一个保险操作,如果上面的监听尺寸方法失败则会启用此 
// 如果很小的图像有可能加载时间小于定时器定义的检测间隔时间,则会停止定时器 
img.onload = function () { 
callback(img.width, img.height); 
img.onload = img.onerror = null; 
clearInterval(intervalId); 
container && img.parentNode.removeChild(img); 
}; 
// 图像加载错误 
img.onerror = function () { 
error && error(); 
clearInterval(intervalId); 
container && img.parentNode.removeChild(img); 
}; 
}; 
})(jQuery);

autoIMG压缩后:1.74kb,兼容:Chrome | Firefox | Sifari | Opera | IE6 | IE7 | IE8 | …
调用演示:$(‘#demo p').autoIMG()
同样,令人愉悦的DEMO地址在这里:http://demo.3water.com/js/2011/autoimg/
后记:虽然有了上一篇文章imgReady技术的铺垫,我以为会很简单的实现这个图片自适应插件,可是过程中却在webkit内核的浏览器碰了一鼻子灰,后来才得知webkit有BUG未修复,我折腾许久后更新了imgReady函数。
打包下载地址
Javascript 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
jQuery之折叠面板的深入解析
Jun 19 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 #Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 #Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 #Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 #Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 #Javascript
JavaScript全局函数使用简单说明
Mar 11 #Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 #Javascript
You might like
php session和cookie使用说明
2010/04/07 PHP
php浏览历史记录的方法
2015/03/10 PHP
PHP7引入的"??"和"?:"的区别讲解
2019/04/08 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
Python脚本处理空格的方法
2016/08/08 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
python try except 捕获所有异常的实例
2018/10/18 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
python zip()函数使用方法解析
2019/10/31 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
Jar包的作用是什么
2014/03/30 面试题
电气自动化自荐信
2013/10/10 职场文书
汽车驾驶求职信
2013/10/25 职场文书
金融专业毕业生推荐信
2013/11/26 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS