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高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
Nuxt.js实战详解
Jan 18 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 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 多维数组排序(usort,uasort)
2010/06/30 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
javascript 跳转代码集合
2009/12/03 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
Python中属性和描述符的正确使用
2016/08/23 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
阿巴庭院:Abba Patio
2019/06/18 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
什么是Remote Module
2016/06/10 面试题
迷你西餐厅创业计划书范文
2013/12/31 职场文书
个人德育工作总结
2015/03/05 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
python简单验证码识别的实现过程
2021/06/20 Python