js判断图片加载完成后获取图片实际宽高的方法_javascript技巧

本文实例讲述了js判断图片加载完成后获取图片实际宽高的方法。分享给大家供大家参考,具体如下:

通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置了图片的宽高后获取的就不是图片的实际宽高,这显然在有些时候不是我们想要的结果,那么有没有一种方法来获取这样的实际宽高呢?答案是有的。下面的代码就能解决这样的问题:

<img src="01.jpg" id="test" width="250px">

js code:

//图片加载完成后获取图片实际宽高
var _test = document.getElementById("test");
test.onload = function(){
  imgSize.call(_test);
}
function imgSize(){
  var imgObj = new Image();
  imgObj.src = this.src;
  alert(imgObj.width + "\n" + imgObj.height);
}

如果想在其他方法中调用这个实际的宽高,应该将alert(imgObj.width + "\n" + imgObj.height);改为return imgObj,然后是调用的方法:

window.onload = function(){
    function a(){
      var real= imgSize.call(_test);
      var realwidth = real.width;
      alert(realwidth);
    }
    a();
}

以上方法过于繁琐,经过本人的提炼,简写如下:

window.onload = function(){
    var _test = document.getElementById("test"); //若是jq,则直接将此代码换成 var _test = $("#test"); 即可。
    var imgObj = new Image();
    imgObj.src = _test.src; //若是jq,则直接将此代码换成 imgObj.src = _test.attr("src"); 即可。
    alert(imgObj.width);
}

这样,就可以在其他方法里直接调用图片的实际宽高了。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
, 判断图片加载
获取图片宽高
javascript 加载完成、判断页面是否加载完成、判断图片是否加载完成、js判断图片加载完成、js判断页面加载完成,以便于您获取更多的相关知识。

时间: 2025-01-02 07:52:55

js判断图片加载完成后获取图片实际宽高的方法_javascript技巧的相关文章

JS判断页面加载状态以及添加遮罩和缓冲动画的代码_javascript技巧

复制代码 代码如下: function initialize() { addcloud(); //为页面添加遮罩 document.onreadystatechange = subSomething; //监听加载状态改变 } function addcloud() { var bodyWidth = document.documentElement.clientWidth; var bodyHeight = Math.max(document.documentElement.clientHei

JS实现重新加载当前页面或者父页面的几种方法_javascript技巧

在开发过程中想要在某个时机去刷新某个固定的页面,去更新该页面某些控件的属性,比如显示隐藏.是否可点击等. 是用的主要是通过 刷新该页面, 方法如下:    方法一:            在该页面中调用: location.reload();     方法二:            在该页面调用:    locatiion.replace("NEW_URL");    方法三:            windows.location.href="NEW_URL";

jQuery实现图片加载完成后改变图片大小的方法_jquery

本文实例讲述了jQuery实现图片加载完成后改变图片大小的方法.分享给大家供大家参考,具体如下: 要改变图片的大小并不难,可以用jQuery操作css改变.但是前提是要判断图片是否加载完成.主要是通过jQuery的load事件和onreadystatechange来判断其状态. 对于IE6,用onreadystatechange可以直接处理,在IE7中,则需要用定时器来判断图片的readystate状态.而对于FF和Chrome刚可以直接用load事件来判断. 以下是在实例中使用的完整代码: <

js获取图片宽高的方法_javascript技巧

本文分享多种js获取图片宽高的方法,并且通过实例进行分析,希望大家从中有所收获. 一.简陋的获取图片方式 // 图片地址 后面加时间戳是为了避免缓存 var img_url = 'upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 打印 alert('width:'+img.width+',height:'

一览画面点击复选框后获取多个id值的方法_javascript技巧

在web开发中经常会遇到一览画面中每一条记录前都带一个复选框,点击后选中该条记录进行删除.修改.查看等操作. 修改和查看都是获取一条记录的id值后传递到后台进行查询获取该记录对象的各种属性值,再显示到画面上. 我说的重点是选中多条记录后进行批量删除,如何获取多条记录的id值是问题的关键.首先是在jsp页面中全选中复选框的方法. 代码如下: function checkEvent(name, allCheckId) { var allCk = document.getElementById(all

javascript加载xml 并解析各节点的值(实现方法)_javascript技巧

实例如下: var xmlDoc = null; function LoadXml(xmlPath) { try { if (window.ActiveXObject) { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); } } catch (e) { try { xmlDoc = document.implementation.createDocument("", "", null); } cat

js判断鼠标左、中、右键哪个被点击的方法_javascript技巧

本文实例讲述了js判断鼠标左.中.右键哪个被点击的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>js判断鼠标左.中.右键哪个被点击-柯乐义</title> <script type="text/javascript"> function whichButton(event) { var btnNum = event.button; if (btnNum==2)

实现load加载完成后把图片一次性显示出来

 如何一个load 加载完成后把图片一次性显示出来,下面有个不错的方法,希望对大家有所帮助 方法一:  复制代码 代码如下: <script type="text/javascript">  var obj = new Image();  obj.src = "yourpicurl.jpg";  obj.onload = function() { //这个地方可以重复写入,如果错误的话,换到外面即可  document.getElementById(&q

JavaScript控制图片加载完成后调用回调函数的方法

 这篇文章主要介绍了JavaScript控制图片加载完成后调用回调函数的方法,实例分析了javascript回调函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JavaScript控制图片加载完成后调用回调函数的方法.分享给大家供大家参考.具体分析如下: 这段代码可以控制指定区域内的图片加载完成后执行指定的回调函数. 代码如下: function when_images_loaded($img_container, callback) { /* do callb