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

为了防止图片撑破布局,最常见的仍然是通过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.jb51.net/js/2011/autoimg/
后记:虽然有了上一篇文章imgReady技术的铺垫,我以为会很简单的实现这个图片自适应插件,可是过程中却在webkit内核的浏览器碰了一鼻子灰,后来才得知webkit有BUG未修复,我折腾许久后更新了imgReady函数。
打包下载地址

(0)

相关推荐

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

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

  • 推荐6款基于jQuery实现图片效果插件

    1.基于jQuery实现的汇图网大屏焦点图效果 汇图网大屏jQuery焦点图代码,可设置切换模式,如淡入淡出切换,左右滚动切换,上下滚动切换,可设置是否自动轮播,可设置鼠标划过是否停止播放等. 在线演示 源码下载 2.HTML5基于SVG实现的过山车动画特效 今天我们要分享一款很酷的HTML5/SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,整体动画效果流畅自然,效果非常酷. 在线演示 源码下载 3.jQuery实现苹果官网页面上下滚动全屏效果 这是一款基于

  • 基于jQuery的图片剪切插件

    第一步:建立工作区间 首先,我们要位我们这个教程建立一个工作区间,建立如图所示的文件层次结构,以及新建相应的空文件. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • 基于jQuery实现返回顶部实例代码

    效果图展示如下所示: 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: 引用代码: <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="http:

  • viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)

    一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 支持键盘 支持全屏幻灯片模式(可做屏保) 支持缩略图 支持标题显示 支持多种自定义事件 Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样,但代码不一样,不能通用. 二.下载 纯JS版本: 下载地址:https://github.com/fengyuanchen/

  • 基于jQuery的消息提示插件 DivAlert之旅(二)

    改进的代码部分主要如下: 1.创建default.css文件: 代码 复制代码 代码如下: img { vertical-align:middle; } .jBg { position: absolute; top: 0; left: 0; z-index: 9999; background-color: #999; filter: alpha(opacity=70); opacity: 0.7; } .jWrap { position: absolute; border: 1px solid

  • 基于jQuery实现图片推拉门动画效果的两种方法

    ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换. 实现方法一:改变图片宽度 html+css代码 <body> <div class="box"> <ul> <!-- <li>![](images/slidepic2.jpg)</li> --> <li&g

  • 基于jQuery的消息提示插件之旅 DivAlert(三)

    本版本遵循了2.0的写法,此处通过extend方法封装了需要设置的各个选项,比起2.0版本的代码要精简了一些. 2.0版本 复制代码 代码如下: //设置插件基本信息 var options = o || {}; options.width = o.width || 300; //提示框宽度若小于104px则自动重置为200px if (options.height > 104) { options.height = o.height; } else { options.height = 200

  • 一款基于jQuery的图片场景标注提示弹窗特效

    今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗,不支持IE8及以下浏览器.效果非常不错.效果如下: 实现的过程. 这款实例要引用jquery和jquery ui库,还有一个实现的main.js库.需上的朋友可以点击上现的下载按钮下载来看看. html代码部分: 复制代码 代码如下: <div class="container"

  • 基于jquery的lazy loader插件实现图片的延迟加载[简单使用]

    通过使用jquery的lazy loader插件可以实现图片的延迟加载,当网页比较长的时候,会先只加载用户视窗内的图片,视窗外的图片会等到你拖动滚动条至后面才加载,这样有效的避免了因图片过多而加载慢的弊端. 使用lazy loader插件很简单,只要在页面中引入lazy loader插件,然后为页面上的图片调用延迟加载方法就可以了.lazy loader插件的下载地址:http://www.appelsiini.net/projects/lazyload.下面先看看具体的使用方法: 复制代码 代

随机推荐