JS获取图片高度宽度的方法分享

一般获取图片高度宽度的写法：

代码如下:

var img = new Image();
img.src = imgsrc;
var imgWH = CalcImgTiple(img.width, img.height);

但chrome中测试 无法获取到。img.width, img.height都为0

原因:当图片不是本地图片,而是网络图片
onload 在成功地装载了图像时调用的事件处理程序。

在做web开发，其中有一个需求：利用Javascript获取要加载的图片的尺寸，所以很自然的，想到了img的onload方法，在firefox下开发完成后，到IE下调试，发现img的onload事件很多情况下都不被调用。

最初的代码如下：

代码如下:

var img = new Image;
img.src = "test.gif";
img.onload = function(){
alert ( img.width );
};

这段代码看着没什么问题，但是为什么onload没有被IE调用呢？因为IE会缓存图片，第2次加载的图片，不是从服务器上传过来的，而是从缓冲区里加载的。是不是从缓冲区里加载的图片就不触发onload事件呢？我于是我测试了以下代码，成功了～

代码如下:

var img = new Image;
img.onload = function(){
alert ( img.width );     };
img.src = "test.gif";

把onload写到前面去，先告诉浏览器如何处理这张图片，再指定这张图片的源，这样就正常了。所以，不是IE没有触发onload事件，而是因为加载缓冲区的速度太快，以至于没有运行到img.onload的时候，onload事件已经触发了。这让想到了Ajax，在写xmlhttp的时候，都是先指定onstatechange的回调函数，然后再send数据的，道理是一样的

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • js 加载时自动调整图片大小

    //  方法:setSelectReadOnly  用于设定极select控件ReadOnly, //        这个一个模拟只读不是真的只读 //        使用了onbeforeactivate,onfocus,onmouseover,onmouseout事件 //    示例:< img src='img.jpg' onload='ImgAutoSize(ImgD,FitWidth,FitHeight)' > ; //  create by sl  // ------------

  • Js获取图片原始宽高的实现代码

    如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(img) { var image = new Image(); image.src = img.src; return [image.width,image.height]; } //点击缩略图弹出层,显示原始图片. //获取class为tz_main_box下的所有p标签下的图片img $(".tz_

  • Javascript获取图片原始宽度和高度的方法详解

    Javascript获取图片原始宽度和高度的方法详解

    前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法. 如下: <img id="img" src="1.jpg"> <script type="text/javascript"> var img

  • 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 动态改变图片大小

    最近由于项目需要,在实现图片的时候,若图片大于100 X 100,则将其缩小为 100 X 100,若比这个小,则保持原图大小.经过研究发现,可以用Javascript代码简单实现. Javascript代码: 复制代码 代码如下: <script> function resizeImage(obj){if(obj.height>100)obj.height=100;if(obj.width>100)obj.width=100; } </script> 页面代码: 复制

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

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

  • JS自动缩小超出大小的图片

    复制代码 代码如下: <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> jQuery.fn.LoadImage=function(scaling,width,height,loadpic){ if(loadpic==null)loadpic="../img/lo

  • JS检测图片大小的实例

    复制代码 代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <input type="hidden" name="MAX_FILE_SIZE" id="MAX_FILE_SIZE" value="8000000" /> <input type="

  • js和jquery如何获取图片真实的宽度和高度

    1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都是按照图片的原尺寸来展示,如果手机屏幕太小,太大的图就会超出去!这时候有两种解决办法 1)给所有的图片加上这样的样式 1 复制代码 代码如下: .news img{margin:5px auto; display:block;width:100%; height:auto;} 但是这种方式有另外

  • 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 =

随机推荐