基于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 相关文章推荐
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
javascript封装简单实现方法
Aug 11 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
DWR中各种java方法的调用
May 04 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 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
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
简单实现PHP留言板功能
2016/12/21 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
Python文件操作基本流程代码实例
2017/12/11 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
行政助理岗位职责范文
2013/12/03 职场文书
社区中秋节活动方案
2014/01/29 职场文书
2014年德育工作总结
2014/11/20 职场文书
客服专员岗位职责
2015/02/10 职场文书
学历证明范文
2015/06/16 职场文书
培根随笔读书笔记
2015/07/01 职场文书