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 相关文章推荐
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
js与applet相互调用的方法
Jun 22 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 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
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
Python制作数据导入导出工具
2015/07/31 Python
python+opencv实现动态物体追踪
2018/01/09 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
在Python中增加和插入元素的示例
2018/11/01 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
互联网创业计划书的书写步骤
2014/01/28 职场文书
《穷人》教学反思
2014/04/08 职场文书
考察现实表现材料
2014/05/19 职场文书
电子专业求职信
2014/06/19 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android