jQuery动态改变图片显示大小(修改版)的实现思路及代码


Posted in Javascript onDecember 24, 2013

当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸。通过搜索,我们可以从网上找到实现此功能的jQuery代码如下。这段代码可以使图片的大小保持在一定范围内,如果图片的原始尺寸都大于max*值,则显示出来的图片宽度都相等。

原始代码:

$(document).ready(function() {
     $('.post img').each(function() {
     var maxWidth = 100; // 图片最大宽度
     var maxHeight = 100;    // 图片最大高度
     var ratio = 0;  // 缩放比例
     var width = $(this).width();    // 图片实际宽度
     var height = $(this).height();  // 图片实际高度     // 检查图片是否超宽
     if(width > maxWidth){
         ratio = maxWidth / width;   // 计算缩放比例
         $(this).css("width", maxWidth); // 设定实际显示宽度
         height = height * ratio;    // 计算等比例缩放后的高度 
         $(this).css("height", height);  // 设定等比例缩放后的高度
     }
     // 检查图片是否超高
     if(height > maxHeight){
         ratio = maxHeight / height; // 计算缩放比例
         $(this).css("height", maxHeight);   // 设定实际显示高度
         width = width * ratio;    // 计算等比例缩放后的高度
         $(this).css("width", width * ratio);    // 设定等比例缩放后的高度
     }
 });
 });

在我的js代码中,也采取了这种写法。然而在不同的浏览器测试效果时,发现此种写法不能适应chrome浏览器(chrome版本号为10.0.648.204),会产生图片以原有尺寸显示出来的bug。后来把$('.post img').each()的代码用$(window).load()方法包装起来,就解决了chrome浏览器显示不正确的问题。那么在chrome浏览器中为什么会产生bug,并且$(document).ready和$(window).load有什么区别呢?

原来document ready事件是在HTML文档载入即DOM准备好就开始执行了,即使图片资源还没有加载进来。而window load事件执行的稍晚一些,它是在整个页面包括frames, objects和images都加载完成后才开始执行的。从这种区别可以分析出chrome浏览器在对于图片不采用$(window).load()方法处理时,图片载入与动态改变图片的js代码执行顺序不确定。

关于上面的代码,放到我的页面中时获取图片高度时会报错,提示没有提供width方法

var width = $(this).width();    // 图片实际宽度
     var height = $(this).height();  // 图片实际高度

故修改代码如下:

jQuery(window).load(function () {
            jQuery("div.product_info img").each(function () {
                DrawImage(this, 680, 1000);
            });
        });
        function DrawImage(ImgD, FitWidth, FitHeight) {
            var image = new Image();
            image.src = ImgD.src;
            if (image.width > 0 && image.height > 0) {
                if (image.width / image.height >= FitWidth / FitHeight) {
                    if (image.width > FitWidth) {
                        ImgD.width = FitWidth;
                        ImgD.height = (image.height * FitWidth) / image.width;
                    } else {
                        ImgD.width = image.width;
                        ImgD.height = image.height;
                    }
                } else {
                    if (image.height > FitHeight) {
                        ImgD.height = FitHeight;
                        ImgD.width = (image.width * FitHeight) / image.height;
                    } else {
                        ImgD.width = image.width;
                        ImgD.height = image.height;
                    }
                }
            }
        }
Javascript 相关文章推荐
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 #Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 #Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 #Javascript
JS控制图片等比例缩放的示例代码
Dec 24 #Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 #Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 #Javascript
js 获取、清空input type="file"的值(示例代码)
Dec 24 #Javascript
You might like
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
解密效果
2006/06/23 Javascript
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
Use Word to Search for Files
2007/06/15 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
Python中列表(list)操作方法汇总
2014/08/18 Python
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
python如何查看系统网络流量的信息
2016/09/12 Python
python使用tkinter实现简单计算器
2018/01/30 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
Python自省及反射原理实例详解
2020/07/06 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
寒假实习自荐信
2014/01/26 职场文书
2014年冬季防火方案
2014/05/21 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
工作一年自我鉴定
2019/06/20 职场文书