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 相关文章推荐
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
js自制图片放大镜功能
Jan 24 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
JavaScript实现微信号随机切换代码
Mar 09 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
ES6中的类(Class)示例详解
Dec 09 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
桌面中心(二)数据库写入
2006/10/09 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
JavaScript运动原理基础知识详解
2020/04/02 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
python打开文件的方式有哪些
2020/06/29 Python
python 利用toapi库自动生成api
2020/10/19 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
酒店销售主管岗位职责
2014/01/04 职场文书
教师年度考核评语
2014/04/28 职场文书
保护环境倡议书300字
2014/05/19 职场文书
工程承诺书怎么写
2014/05/24 职场文书
工商管理自荐书
2014/07/06 职场文书
小学优秀教师材料
2014/12/15 职场文书
刘公岛导游词
2015/02/05 职场文书
Python制作春联的示例代码
2022/01/22 Python