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 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 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
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
播音主持女孩的自我评价分享
2013/11/20 职场文书
社区包粽子活动方案
2014/01/21 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
交通安全月活动总结
2015/05/08 职场文书
致运动员的广播稿
2015/08/19 职场文书
2019销售早会主持词
2019/06/27 职场文书