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——表单应用范例
Feb 20 Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
js编写的treeview使用方法
Nov 11 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
微信小程序实现授权登录
May 15 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的图形函数中显示汉字
2006/10/09 PHP
写一个用户在线显示的程序
2006/10/09 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
python文件操作相关知识点总结整理
2016/02/22 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
python plotly绘制直方图实例详解
2019/07/22 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
会计与审计毕业生自荐信范文
2013/12/30 职场文书
大学生创业项目方案
2014/03/08 职场文书
2014年食堂工作总结
2014/11/20 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android