脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Javascript判断图片尺寸大小

Javascript判断图片尺寸大小实例分析

 更新时间：2014年06月16日 11:33:15   投稿：shichen2014  
通常我们判断js图片大小都是利用images对象，然后再用attr来获取图片地址再进行判断就可以了。这篇文章主要介绍了Javascript判断图片尺寸大小的实例,需要的朋友可以参考下

通常我们判断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这个是必须的。

您可能感兴趣的文章:

相关文章

  • 一道常被人轻视的web前端常见面试题(JS)

    一道常被人轻视的web前端常见面试题(JS)

    面试题是招聘公司和开发者都非常关心的话题，公司希望通过它了解开发者的真实水平和细节处理能力，而开发者希望能够最大程度地展示自己的水平（甚至超常发挥）。本文提供了众多前端开发面试题，无论是招聘方还是应聘方都值得一看
    2016-02-02
  • JavaScript中的this原理及6种常见使用场景详解

    JavaScript中的this原理及6种常见使用场景详解

    这篇文章主要介绍了JavaScript中的this原理及6种常见使用场景详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • js实现简单排列组合的方法

    js实现简单排列组合的方法

    这篇文章主要介绍了js实现简单排列组合的方法,可实现数学上排列组合算法功能,涉及JavaScript数组与字符串操作技巧,需要的朋友可以参考下
    2016-01-01
  • 利用JS测试目标网站的打开响应速度

    利用JS测试目标网站的打开响应速度

    本文简单说明利用JS来测试目标网站的打开响应速度,方法简单明了大家一看就明白并附上了脚本源码
    2017-12-12
  • Javascript节流函数throttle和防抖函数debounce

    Javascript节流函数throttle和防抖函数debounce

    这篇文章主要介绍了Javascript节流函数throttle和防抖函数debounce,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-12-12
  • es6数组的flat()，flatMap()函数用法实例分析

    es6数组的flat()，flatMap()函数用法实例分析

    这篇文章主要介绍了es6数组的flat()，flatMap()函数用法,结合实例形式分析了es6数组的flat()，flatMap()函数基本功能、使用方法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • javascript禁用键盘功能键让右击及其他键无效

    javascript禁用键盘功能键让右击及其他键无效

    禁用键盘功能键的方法有很多，在本文为大家详细介绍下，使用javascript如何实现禁用键盘功能键及其他键的方法，感兴趣的朋友可以参考下
    2013-10-10
  • 微信小程序时间轴实现方法示例

    微信小程序时间轴实现方法示例

    这篇文章主要介绍了微信小程序时间轴实现方法,结合实例形式分析了微信小程序wx:for语句使用与时间轴纵向布局相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • 表单切换，用回车键替换Tab健(不支持IE)

    表单切换，用回车键替换Tab健(不支持IE)

    表单切换，用回车键替换Tab健。input的属性tab的值表示切换的顺序，这个值必须是连续的，并且不能重复。目前不支持IE
    2011-07-07
  • JS变量提升原理与用法实例浅析

    JS变量提升原理与用法实例浅析

    这篇文章主要介绍了JS变量提升,结合实例形式分析了JS变量提升基本概念、功能、原理、用法及相关注意事项,需要的朋友可以参考下
    2020-05-05

最新评论