miércoles, 3 de abril de 2013

HTML - Atributo Complete para el elemento img

Hoy ví que una compañera tenía en un elemento IMG el atributo "complete", lo cuál se me hizo muy extraño, hasta le dije que no lo usara. Como siempre me quedé con la duda y lo investigué. Resulta que ese atributo si existe pero solo en el BOM (Browser Object Model), o sea, que los navegadores de internet si reconocen dicho atributo para el elemento IMG.

Yo me acuerdo más del DOM al punto que investigando en las revisiones de la W3C, no mencionan por ninguna parte al atributo "complete".

Encontré una referencia que dice que para HTML5 ese atributo si va a estar definido, pero no lo he comprobado.

Para que sirve el atributo "complete" en el elemento img?

Se usa únicamente para saber si la imagen ya se cargó completamente. Es un atributo de solo lectura y esto quiere decir que no se le puede asignar un valor, lo máximo que se puede hacer es consultar su estado utilizando javascript.

Es inválido poner: <img id="miEjemplo" complete="complete" />

Es inválido porque "complete" es de solo lectura y en el ejemplo anterior se le está asignando un valor, además el valor que puede o se espera que tenga debe ser de tipo booleano true|false.

Cuando un uri no existe, se devuelve internamente el código de estado 404. Si una imagen no existe aun así en el atributo "complete" queda el valor true tanto en Chrome como Firefox, lo cual se me hace algo extraño, en cambio IE el atributo si queda en false.

uri = uniform resource identifier / identificador uniforme de recurso / es un recurso como una imgen por ejemplo, algo específico.

JQuery - Formas para obtener la altura del contenido en un IFrame

Funciona correctamente, por desgracia en IE 9 Y 8 vamos a tener problemas ya que siempre retorna el valor 0:

var iframeSize = $('#myIFrame').contents().find('body').height();


Otra vez jquery me ayudó con una línea de código que aunque en el ejemplo que ví, no era lo mismo que me estaba ocurriendo, de bataso ví que basta con poner lo siguiente para obtener la altura aproximada del contenido del iFrame:

var iframeSize = $('#myIFrame').contents().height();


Ambas líneas son aceptables, pero como siempre en IE lo que parece lógico que sirva, no siempre es así.

Ser precavido, el iframe para mi caso no tenía el atributo height establecido, por lo que la altura default viene siendo cero y cambia hasta que se agrega contenido al iframe. CSS también entra en juego en estos casos, por lo que recomiendo tener en mente cualquier estilo que afecte las dimensiones del iframe.