基于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 相关文章推荐
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
javascript instanceof,typeof的区别
Mar 24 Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
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执行linux系统命令的常用函数使用说明
2010/04/27 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
jquery.validate使用详解
2016/06/02 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
几种响应式文字详解
2017/05/19 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
Python内置数据类型详解
2014/08/18 Python
Django中的ajax请求
2018/10/19 Python
数学系毕业生的自我评价
2014/01/10 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
天地会口号
2014/06/17 职场文书
医药销售自我评价200字
2014/09/11 职场文书
社区服务活动报告
2015/02/05 职场文书
水电施工员岗位职责
2015/04/11 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python