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-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
JSON键值对序列化和反序列化解析
Jan 24 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
js实现前端界面导航栏下拉列表
Aug 27 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 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
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
sphinx增量索引的一个问题
2011/06/14 PHP
PHP会话处理的10个函数
2015/08/11 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
Vuex 入门教程
2018/01/10 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
python3.5绘制随机漫步图
2018/08/27 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
初学者学习Python好还是Java好
2020/05/26 Python
大学生学习生活的自我评价
2013/11/01 职场文书
写给女朋友的保证书
2015/05/09 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
高中英语教学反思范文
2016/03/02 职场文书
Python中with上下文管理协议的作用及用法
2022/03/18 Python