There is a link to the picture, is it possible to get the width of the height and size of the picture on js?

Sample code for: jsfiddle.net

<a href="./img/1.jpg" >ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 1</a> <br> <a href="./img/2.jpg" >ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 2</a> <br> <a href="./img/3.jpg" >ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 3</a> <br><br> <div id="image_url"></div>

Js:

 $('a').click( function(e) { e.preventDefault(); var img_url = $(this).attr('href'); $("#image_url").text(img_url); });
  • .width(200); - this is set, and get var w = .... .width(); - Stack
  • @Stack Sorry, I did not quite understand. I need to get the real height and width of the image on js . - user199209
  • it is best to find out when generating the page, insert it as an attribute of the link, and then simply display it when you click on it - cyadvert

2 answers 2

You can get the size of the picture. If it is not possible to add attributes to links on the server, you can do this on the client. It is necessary to make ajax request to the server, the browser will load the image, and the dimensions will be received asynchronously:

 $('a').click( function(e) { e.preventDefault(); var img_url = $(this).attr('href'); var img = new Image(); img.src = img_url; //здСсь начнСтся Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ img.onload = function(){ console.log('LOAD', img.width, img.height); // Π° Π²ΠΎΡ‚ здСсь ΠΌΡ‹ ΡƒΠΆΠ΅ Π·Π½Π°Π΅ΠΌ Π΅Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ }; });

Check for download error is not added.

    It is best to find out when generating the page, insert it as an attribute of the link, and then simply display it when clicked.

    Like that:

     $('[data-href]').on('click', function() { $('#prev').attr('src', $(this).data('href')); var str = 'ΠŸΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ: ' + $(this).data('dims') + '<br>Π Π°Π·ΠΌΠ΅Ρ€: ' + $(this).data('size'); $('#descr').html(str); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a data-href="http://maps.google.com/mapfiles/ms/icons/blue-dot.png" data-dims="200x300" data-size="500KB">ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 1</a> <br> <a data-href="http://maps.google.com/mapfiles/ms/icons/red-dot.png" data-dims="300x400" data-size="1MB">ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 2</a> <br> <a data-href="http://maps.google.com/mapfiles/ms/icons/green-dot.png" data-dims="400x500" data-size="123KB">ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 3</a> <br> <br> <img id="prev" src="./img/none.jpg" alt="image" /> <div id="descr"></div>

    • The answer is good, only I can not change the links to the pictures, because they are generated by the php script. - user199209
    • But still it will have to change something. Maybe then ajax request to do, which will return everything you need? - cyadvert
    • So I also thought about Ajax , it would be much easier for php , but for some pictures to constantly send requests. - user199209
    • So what? If your request only checks the images, i.e. only works with files, your server will not even notice this - cyadvert
    • Updated the question. Half of the case has already been decided, it remains to get the width of the height and size of the picture. - user199209