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 相关文章推荐
关于jQuery中的end()使用方法
Jul 10 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
node中的cookie的具体使用
Sep 13 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 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
加强版phplib的DB类
2008/03/31 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
vue自动化表单实例分析
2018/05/06 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
jQuery实现电梯导航模块
2020/12/22 jQuery
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
python实现电子书翻页小程序
2019/07/23 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
优秀学生干部个人的自我评价
2013/10/04 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
建筑工地大门标语
2014/06/18 职场文书
科学发展观活动总结
2014/08/28 职场文书
学生检讨书怎么写
2014/10/09 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS