基于jquery的防止大图片撑破页面的实现代码(立即缩放)


Posted in Javascript onOctober 24, 2011

为了防止图片撑破布局,最常见的仍然是通过onload后获取图片尺寸再进行调整,所以加载过程中仍然会撑破。而Qzone日志的图片在此进行了改进,onload完毕后才显示原图。我以前用onload写过一个小例子:http://www.planeart.cn/?p=1022

通过imgReady可以跨浏览器在dom ready就可以实现图片自适应,无需等待img加载,代码如下:
(3-17修复网友crossyou 指出的一处错误,并且新版本去掉了替换图片)

// jquery.autoIMG.js - 2010-04-02 - Tang Bin - http://planeArt.cn/ - MIT Licensed 
(function ($) { 
// 检测是否支持css2.1 max-width属性 
var isMaxWidth = 'maxWidth' in document.documentElement.style, 
// 检测是否IE7浏览器 
isIE7 = !-[1,] && !('prototype' in Image) && isMaxWidth; $.fn.autoIMG = function () { 
var maxWidth = this.width(); 
return this.find('img').each(function (i, img) { 
// 如果支持max-width属性则使用此,否则使用下面方式 
if (isMaxWidth) return img.style.maxWidth = maxWidth + 'px'; 
var src = img.src; 
// 隐藏原图 
img.style.display = 'none'; 
img.removeAttribute('src'); 
// 获取图片头尺寸数据后立即调整图片 
imgReady(src, function (width, height) { 
// 等比例缩小 
if (width > maxWidth) { 
height = maxWidth / width * height, 
width = maxWidth; 
img.style.width = width + 'px'; 
img.style.height = height + 'px'; 
}; 
// 显示原图 
img.style.display = ''; 
img.setAttribute('src', src); 
}); 
}); 
}; 
// 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); 
/** 
* 图片头数据加载就绪事件 
* @see http://www.planeart.cn/?p=1121 
* @param {String} 图片路径 
* @param {Function} 尺寸就绪 (参数1接收width; 参数2接收height) 
* @param {Function} 加载完毕 (可选. 参数1接收width; 参数2接收height) 
* @param {Function} 加载错误 (可选) 
*/ 
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 check, width, height, newWidth, newHeight, 
img = new Image(); 
img.src = url; 
// 如果图片被缓存,则直接返回缓存数据 
if (img.complete) { 
ready(img.width, img.height); 
load && load(img.width, img.height); 
return; 
}; 
// 检测图片大小的改变 
width = img.width; 
height = img.height; 
check = function () { 
newWidth = img.width; 
newHeight = img.height; 
if (newWidth !== width || newHeight !== height || 
// 如果图片已经在其他地方加载可使用面积检测 
newWidth * newHeight > 1024 
) { 
ready(newWidth, newHeight); 
check.end = true; 
}; 
}; 
check(); 
// 加载错误后的事件 
img.onerror = function () { 
error && error(); 
check.end = true; 
img = img.onload = img.onerror = null; 
}; 
// 完全加载完毕的事件 
img.onload = function () { 
load && load(img.width, img.height); 
!check.end && check(); 
// IE gif动画会循环执行onload,置空onload即可 
img = img.onload = img.onerror = null; 
}; 
// 加入队列中定期执行 
if (!check.end) { 
list.push(check); 
// 无论何时只允许出现一个定时器,减少浏览器性能损耗 
if (intervalId === null) intervalId = setInterval(tick, 40); 
}; 
}; 
})(); 
})(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未修复,webkit无法无法中断img下载。我折腾许久后更新了imgReady函数与这个例子。

打包下载地址

Javascript 相关文章推荐
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
在新窗口打开超链接的方法小结
Apr 14 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 Javascript
css值转换成数值请抛弃parseInt
Oct 24 #Javascript
更优雅的事件触发兼容
Oct 24 #Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 #Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 #Javascript
关于javascript function对象那些迷惑分析
Oct 24 #Javascript
文本框根据输入内容自适应高度的代码
Oct 24 #Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 #Javascript
You might like
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
php中取得文件的后缀名?
2012/02/20 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
JS实现拖动模糊框特效
2020/08/25 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
Python import用法以及与from...import的区别
2015/05/28 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
python运行时间的几种方法
2016/06/17 Python
关于Python的一些学习总结
2018/05/25 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
PyTorch预训练的实现
2019/09/18 Python
python中pow函数用法及功能说明
2020/12/04 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
三个Unix的命令面试题
2015/04/12 面试题
班级元旦晚会开幕词
2015/01/29 职场文书
美丽人生观后感
2015/06/03 职场文书
导游词之崇武古城
2019/10/07 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书