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 相关文章推荐
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
js中比较两个对象是否相同的方法示例
Sep 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网上调查系统
2006/10/09 PHP
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
图片自动更新(说明)
2006/10/02 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
javascript数据类型示例分享
2015/01/19 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
快速创建python 虚拟环境
2020/11/28 Python
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
中学家长会邀请函
2014/02/03 职场文书
广告语设计及教案
2014/03/21 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
学校师德师风整改措施
2014/10/27 职场文书
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS