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 相关文章推荐
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
vue实现动态数据绑定
Apr 28 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
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
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
jquery 指南/入门基础
2007/11/30 Javascript
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
python登录并爬取淘宝信息代码示例
2017/12/09 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
python3个性签名设计实现代码
2018/06/19 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
python实现键盘输入的实操方法
2019/07/16 Python
python向图片里添加文字
2019/11/26 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
机械专业毕业生推荐信范文
2013/11/25 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
爱国主义演讲稿
2014/05/07 职场文书
合作经营协议书范本
2014/09/16 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
大学生党性分析材料
2014/12/19 职场文书