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

Ask Question Forum:

Model Library:2025-02-08 Updated:A.I. model is online for auto reply question page

Show

ASK RECENT

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

Asked by garysamuels

at 2024-07-25 08:09:24

Point:500 Replies:2 POST_ID:829105USER_ID:10

Topic:

JavaScript;jQuery;Hypertext Markup Language (HTML)

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);

Accepted Solution

Expert: duncanb7 replied at 2024-07-25 08:37:54

250 points EXCELLENT

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>

1:2:3:4:5:6:7:8:9:10:11:12:13:

Select All Code

Assisted Solution

Expert: Randy Poole replied at 2024-07-25 08:22:09

250 points EXCELLENT

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";

1:2:3:4:5:

Select All Code

新聞財經娛樂♬資訊 News Economy

About Us|Service|Pricing

Stock Index全球即時指數期貨:

&nbps;

News即時新聞:↓

News即時新聞:↑

On Balance Volume (OBV):

Youtube Video♬ Sharing by members:↓

Youtube Video♬ Sharing by members:↑

Ask Question Forum:

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

Your Information

Members/Profolio