Problems to get width and height of an image inserted with append

0

Page html:

 <!DOCTYPE html>
  <html lang="es">
 <head>
 <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
 </script>
 </head>
 <body>     
    <div id='resultado'></div>


    <script type="text/javascript" src= "js/app.js"></script>
 </body>
 </html>

app.js:

$(document).ready(function() {

     var numMiniaturas=4;
     for( var i=1; i<=numMiniaturas;i++){
         var newListItem= "<img id='imagen"+i+"' 
          src='http://img2.rtve.es/v/1451521/'' />";
          $('#resultado').append(newListItem);
     }
     var filas=numMiniaturas/2;
     var columnas=numMiniaturas/2;
     var height = $('#imagen1').height();
     var width = $('#imagen1').width();
     alert(height);
     alert(width);
   });

Alerts show me 0. This is how the code is when loading the page. I think that when I try to get the height and width of one of the images has not yet been inserted. Any solution?

Thank you very much.

    
asked by Andrés 02.08.2018 в 11:47
source

1 answer

0

You can use the .load() so that when the image loads the width and height.

$("#imagen1").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
    
answered by 02.08.2018 / 11:51
source