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验证表单大全
Nov 25 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
Vue分页器实现原理详解
Jun 28 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
vue style width a href动态拼接问题的解决
Aug 07 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面向对象学习笔记之一 基础概念
2012/10/06 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
python 写的一个爬虫程序源码
2016/02/28 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
美国家具网站:Cymax
2016/09/17 全球购物
高级3D打印市场:Gambody
2019/12/26 全球购物
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
中学生个人自我评价
2014/02/06 职场文书
取保候审保证书
2014/04/30 职场文书
小学教师教学随笔
2015/08/14 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python