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 相关文章推荐
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
js中的闭包学习心得
Feb 06 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
PHP 日常开发小技巧
2009/09/23 PHP
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
在windows下Python打印彩色字体的方法
2018/05/15 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
学习十八大的感悟
2015/08/11 职场文书
诚实守信主题班会
2015/08/13 职场文书
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js