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 相关文章推荐
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
jQuery $.each的用法说明
Mar 22 Javascript
JS链式调用的实现方法
Mar 07 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
详解原生JS回到顶部
Mar 25 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 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语句将数据库*.sql文件导入数据库
2014/05/05 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
python基础教程之自定义函数介绍
2014/08/29 Python
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
python使用udp实现聊天器功能
2018/12/10 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
nohup的用法
2014/08/10 面试题
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
人事部主管岗位职责
2013/12/26 职场文书
成绩单公证书
2014/04/10 职场文书
高中语文课后反思
2014/04/27 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
2014年管理工作总结
2014/11/22 职场文书
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python