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这个是必须的。

赞 (0)

相关推荐

  • 使用js获取图片原始尺寸

    浏览器中显示的图片大小未必是他真实的高和宽,比如像下面这样,我们给他加上宽和高的样式 <img src="IE.png" style="width:25px;height:25px;"> 这样在浏览器中显示的大小就是25px.那么我们如何获取图片的真实大小呢?,下面的代码就实现了这个功能 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <meta h

  • javascript 获取图片尺寸及放大图片

    javascript 获取图片尺寸及放大图片

    1)获取图片尺寸 复制代码 代码如下: <img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(实际大小200*300)" onclick="getWH(this)" width="200" height="300"/> <script>

  • 上传图片js判断图片尺寸和格式兼容IE

    js代码: $(".head").change(function() { var val = $(this).val(); if(!val.match( /.jpg|.gif|.png|.bmp/i ) ){ imgtype = false; alert('图片格式无效!'); }else{ if (FileReader) { var reader = new FileReader(), file = this.files[0]; reader.onload = function(e)

  • javascript 动态调整图片尺寸实现代码

    我前段时间写的一篇文章就遇到过这种事情,后来用CSS的overflow和max-width属性暂时解决了页面变形的问题.这种方法好处是简单,但坏处是会破坏某些细节的效果. 如overflow:hidden,意思是当内部元素宽度大于父框架时隐藏超出宽度的部分.这样做可能会是一些内容突然截断,被隐藏了,很对不起观众. 通过max-width属性限制文章插图最大宽度的话,需要考虑各浏览器的兼容性.IE6是不支持这个属性的,在我印象中,一些浏览器虽然支持这个属性,但图片不是等比缩放的(好像是Safari

  • 图片上传之前检查大小、尺寸、格式并预览的js代码

    下面的代码,需要保存到本地种执行,在线看不到实际效果. validate before upload by Lance Zhang File type :gif,jpg,jpeg,png,bmp File Size limit: K Image Height Limit: Image Width Limit: Image Preview function CheckFileSize() { var limit = document.getElementById("fileSizeLimit&qu

  • JavaScript怎么判断图片是否加载完成以便获取其尺寸

    有时需要获取图片的尺寸,这需要在图片加载完成以后才可以,求方法? 一.load事件 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>img - load event</title> </head> <body> <img id="img1" src="http:/

  • JS等比例缩小图片尺寸的实例

    为了提升用户体验,网站用户在上传图片的时候,我们不能够让用户自己去处理图片以达到我们的要求. 而通常像淘宝上商品实物展示这样的页面,我们需要控制的主要是图片的宽度. 又考虑到html页面解析顺序可能导致的一些问题,决定通过定义一个简单的功能函数,然后在img元素中添加onload事件来调用的方式进行实现,代码如下: JS部分 复制代码 代码如下: <script type="text/javascript"> function changeImg(objImg) {    

  • JavaScript获取图片的原始尺寸以宽度为例

    页面里的img元素,想要获取它的原始尺寸,以宽度为例可能首先想到的就是width,如下 复制代码 代码如下: <img src="http://img11.360buyimg.com/da/g14/M07/01/0E/rBEhVlNhh8wIAAAAAADmFBLo1twAAM26gOmCgYAAOYs716.jpg"> <script> var img = document.getElementsByTagName('img')[0] var width =

  • JavaScript简单获取页面图片原始尺寸的方法

    本文实例讲述了JavaScript简单获取页面图片原始尺寸的方法.分享给大家供大家参考,具体如下: 这里通过Image()对象获取原始宽高 这种方式就没有那么麻烦,直接new一个Image()对象,然后把img的src赋值给他即可获取. var img = new Image(); img.src = $("#target").attr("src"); if(img.complete){ alert('width:'+img.width+',height'+img.

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

    通常我们判断js图片大小都是利用images对象,然后再用attr来获取图片地址再进行判断就可以了,下面来看一些例子.最简单办法: 复制代码 代码如下: var img=new Image();    img.src=$('#tlogo').attr('src');    if(img.width > '240'){        $('#tlogo').attr('width','240');} 上面例子碰到如果页面没有加载完的时候,这时js就获取不了图片大小了,对此我们可以先判断加载完成否再

  • Python实现更改图片尺寸大小的方法(基于Pillow包)

    本文实例讲述了Python实现更改图片尺寸大小的方法.分享给大家供大家参考,具体如下: 1.PIL包推荐Pillow. 2.源码: #encoding=utf-8 #author: walker #date: 2014-05-15 #function: 更改图片尺寸大小 import os import os.path from PIL import Image ''' filein: 输入图片 fileout: 输出图片 width: 输出图片宽度 height:输出图片高度 type:输出图

  • JavaScript进阶练习及简单实例分析

    JavaScript进阶练习及简单实例分析

    当用户点击"统计"按钮时,在窗口中弹出文本框中出现次数最多的字符并显示其出现的次数 点击统计按钮时效果如图所示: 实现代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

  • JavaScript限定图片显示大小的方法

    本文实例讲述了JavaScript限定图片显示大小的方法.分享给大家供大家参考.具体实现方法如下: /** * 限制图片显示的size. * * @param thisobj 图片组件 * @param limitW 限制宽度大小 * @param limitH 限制高度大小 */ function imageResize(thisobj, limitW, limitH) { var newW; var newH; if (thisobj.width > limitW) { newW = lim

  • JavaScript判断图片是否已经加载完毕的方法汇总

    在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕方法汇总,具体内容如下所示: 一.onload事件 通过监听图片的onload事件,可以判断图片是否已经加载完成,兼容所有的浏览器(w3c推荐方法),代码示例如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

  • javascript判断图片是否加载完成的方法推荐

    load事件 <script type="text/javascript"> $('img').onload = function() { //code } </script> 优点:简单易用,不影响HTML代码. 缺点:只能指定一个元素,javascipt代码必须置于图片元素的下方 jquery方法 <script type="text/javascript"> $(function(){ $('.pic1').each(fun

  • JavaScript判断日期时间差的实例代码

    js判断日期时间的代码如下所示: alert(GetDateDiff("2018-02-27 19:20:22","2018-02-27 09:20:22","hour")); function GetDateDiff(startTime, endTime, diffType) { //将xxxx-xx-xx的时间格式,转换为 xxxx/xx/xx的格式 startTime = startTime.replace(/\-/g, "/&q

  • 如何基于JavaScript判断图片是否加载完成

    这篇文章主要介绍了如何基于JavaScript判断图片是否加载完成,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 这里我用了一个tag来判断显示哪个样式,但是tag是写在了setTimeOut里面的,是一个延时函数,异步的操作.延时300ms的目的就是为了等待图片加载出来,但是当网络慢的时候是满足不了的.网络慢图片没有加载出来300ms之后就会直接走入false,会提示用户重新获取图片,但其实图片已经返回回来了. 所以这样的做法是很不灵活的.

  • JavaScript获取图片真实大小代码实例

    网页页面上的图片尺寸似乎都千篇一律.我们最常见到的带有多图的文章页面中,图的大小通常是和页面的宽度一致,这样看起来,页面就是一个直筒形,这样的布局看多了就会觉得很单调.之所以形成这样的局面,我想很大程度上是因为老式浏览器的限制.但随着现代浏览器(火狐/谷歌/IE11)的普及,浏览器对页面设计的限制越来越少,Web程序员的想象能力能够得到极大的发挥. 比如,冷知识:你知道每个视窗都有的 [x] 是怎么来的吗?这篇文章中,很多图片超出了文本宽度的限制,给人一种参差错落的感觉,同时,让大图片以其真实的

  • javascript中sort()的用法实例分析

    本文实例分析了javascript中sort()的用法.分享给大家供大家参考.具体分析如下: 函数的语法: arrayObject.sort(sortby) you think this is not the right way but you love it 这里还用到了split函数,目的是去到一个字符串的数组,比较常用.然后通过数组的排序函数sort()对数组内的值进行排序,得到新的数组,然后通过循环输出数组的内容就得到了排序后的字符串. 在例子中,默认情况下,它会按照ascii码来进行排

随机推荐