Javascript判断图片尺寸大小实例分析


Posted in Javascript onJune 16, 2014

通常我们判断js图片大小都是利用images对象,然后再用attr来获取图片地址再进行判断就可以了,下面来看一些例子。
最简单办法:

var img=new Image();
    img.src=$('#tlogo').attr('src');
    if(img.width > '240'){
        $('#tlogo').attr('width','240');
}

上面例子碰到如果页面没有加载完的时候,这时js就获取不了图片大小了,对此我们可以先判断加载完成否再判断图片大小。

<img id="img2" src="images/1.jpg" />
<script language="JavaScript">
    document.getElementById("img2").onload = function () {
        alert("图片加载已完成");
    }
</script>

或者采用jquery:

$("#imageId").load(function(){
   alert("加载完成!");
});

至此我们就可以对代码进行优化了

$("#tlogo").load(function(){
 var img=new Image();
        img.src=$('#tlogo').attr('src');
        if(img.width > '240'){
        $('#tlogo').attr('width','240');
}
});

此处注意:#tlogo 就是你图片地址中加的一个ID这个是必须的。

Javascript 相关文章推荐
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
JS实现关闭小广告特效
Jan 29 Javascript
javascript进行数组追加方法小结
Jun 16 #Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 #Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 #Javascript
js限制文本框只能输入数字方法小结
Jun 16 #Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 #Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 #Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 #Javascript
You might like
德劲1104的电路分析与改良
2021/03/01 无线电
php通过字符串调用函数示例
2014/03/02 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
Python的缺点和劣势分析
2019/11/19 Python
python 实现兔子生兔子示例
2019/11/21 Python
python装饰器代替set get方法实例
2019/12/19 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
教师业务培训方案
2014/05/01 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
怎样写好工作计划
2019/04/10 职场文书
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL