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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
document.createElement()用法
Mar 13 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
Nodejs之http的表单提交
2017/07/07 NodeJs
jquery获取transform里的值实现方法
2017/12/12 jQuery
JS实现简易换图时钟功能分析
2018/01/04 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
python 不关闭控制台的实现方法
2011/10/23 Python
python实现简单的socket server实例
2015/04/29 Python
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
Python银行系统实战源码
2019/10/25 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
美国滑板店:Tactics
2020/11/08 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
结构工程个人自荐信范文
2013/11/30 职场文书
党员公开承诺书2016
2016/03/24 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
七年级话题作文之执着
2019/11/19 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
一条 SQL 语句执行过程
2022/03/17 MySQL