?
Solved

How to find the width of an image before it loads.

Posted on 2014-07-25
2
Medium Priority
?
450 Views
Last Modified: 2014-07-25
I need to know the width of an image before it is called in the html source. I know the name of the image and I'm trying to use javascript to discover the width. This returns a vale of 0 for the width.


var img = new Image();
img.src = "http://mysite.com/graphics/myimage.png"
window.confirm(img.width);
0
Comment
Question by:Gary Samuels
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 21

Assisted Solution

by:Randy Poole
Randy Poole earned 1000 total points
ID: 40219655
There is no way to know before it is loaded.  You can however catch this info before you add it to your page and do what needs to be done:
img = new Image();
img.onload = function() {
  alert("(" + this.width + "x" + this.height+")");
};
img.src = "http://mysite.com/graphics/myimage.png";

Open in new window

0
 
LVL 13

Accepted Solution

by:
duncanb7 earned 1000 total points
ID: 40219721
You can do get the image width before adding it into DOM

Duncan    
<script type="text/javascript">
var getImageSize = function(src) {
    var img = new Image();
    $(img).bind('load', function(e) {
        var height = img.height;
        var width = img.width;
      //  document.write('width:' + width + ', height: ' + height);
	  alert("width="+width);
    });
    img.src = src;
};	
getImageSize('http://localhost/data/php/water.jpg');
</script>

Open in new window

0

Featured Post

Tutorials alone can't teach real engineering

So we built better training tools.

-Hands-on Labs
-Instructor Mentoring
-Scenario-Based Tests
-Dedicated Cloud Servers

All at your fingertips. What are you waiting for?

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question