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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
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下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
php实现可逆加密的方法
2015/08/11 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
vue cli webpack中使用sass的方法
2018/02/24 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
python实现list由于numpy array的转换
2018/04/04 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
Python循环实现n的全排列功能
2019/09/16 Python
python实现大学人员管理系统
2019/10/25 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
法学专业本科生自荐信范文
2013/12/17 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
海洋天堂观后感
2015/06/05 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
Mysql 设置boolean类型的操作
2021/06/04 MySQL