<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Dave Ruiz Blog &#187; internet explorer</title>
	<atom:link href="http://blog.daveruiz.net/tag/internet-explorer/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.daveruiz.net</link>
	<description>Freelance Web Developer</description>
	<lastBuildDate>Sat, 21 Jan 2012 12:24:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Javascript: Cuando onload no es lanzado (actualizado)</title>
		<link>http://blog.daveruiz.net/programacion/cuando-onload-no-es-lanzado/</link>
		<comments>http://blog.daveruiz.net/programacion/cuando-onload-no-es-lanzado/#comments</comments>
		<pubDate>Tue, 11 Aug 2009 22:10:30 +0000</pubDate>
		<dc:creator>Dave Ruiz</dc:creator>
				<category><![CDATA[Programación]]></category>
		<category><![CDATA[complete]]></category>
		<category><![CDATA[error]]></category>
		<category><![CDATA[ie]]></category>
		<category><![CDATA[internet explorer]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[onload]]></category>

		<guid isPermaLink="false">http://blog.daveruiz.net/?p=238</guid>
		<description><![CDATA[En ocasiones, ocurre que el evento onLoad, por ejemplo, de una imagen no es lanzado a la hora de cargar una página. Imaginemos que en el script de una página, una vez cargado el DOM, añadimos una función determinada cuando carga la imagen de cabecera: &#60;script type=&#34;text/javascript&#34;&#62; // Función que ejecutamos al cargar el DOM [...]]]></description>
			<content:encoded><![CDATA[<p>En ocasiones, ocurre que el evento <strong>onLoad</strong>, por ejemplo, de una imagen no es lanzado a la hora de cargar una página.</p>
<p>Imaginemos que en el script de una página, una vez cargado el DOM, añadimos una función determinada cuando carga la imagen de cabecera:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
  <span style="color: #006600; font-style: italic;">// Función que ejecutamos al cargar el DOM de la página</span>
  window.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> cabecera <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;cabecera&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #006600; font-style: italic;">// Funcion lanzada cuando carga la imagen 'cabecera'</span>
    cabecera.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;carga completa&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   <span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

<p>Nos encontraremos con que en algún navegador (por ejemplo, Internet Explorer) lanza la primera vez el evento, pero en las posteriores cargas este no es lanzado.</p>
<p>La razón es que, en la segunda carga, la imagen se encuentra cacheada y por tanto el navegador carga la imagen en cuanto inserta el elemento <em>IMG</em>, lanzando el correspondiente evento <em>onLoad</em>. Como en ese preciso momento todavía estamos cargando la estructura de la página y el evento no ha sido asignado (no se asigna hasta la carga completa de la estructura), cuando queremos asignarlo ya es demasiado tarde.</p>
<p><del datetime="2009-08-12T06:19:12+00:00">Otros navegadores como Mozilla Firefox no lanzan los eventos hasta que se ha completado la carga del DOM, haciendo inexistente este problema.</del></p>
<p>Una solución sencilla es comprobar, después de asignar el evento <em>onLoad </em>a la imagen, si esta ya se encuentra cargada complétamente. Nos serviremos del parámetro <strong>complete</strong>. Si nos devuelve <em>true</em>, lanzamos el evento <em>onLoad</em> manualmente.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
  <span style="color: #006600; font-style: italic;">// Función que ejecutamos al cargar el DOM de la página</span>
  window.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> cabecera <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;cabecera&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #006600; font-style: italic;">// Funcion lanzada cuando carga la imagen 'cabecera'</span>
    cabecera.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;carga completa&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>cabecera.<span style="color: #660066;">complete</span> <span style="color: #339933;">==</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span> cabecera.<span style="color: #000066;">onload</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

<p><strong>Actualización:</strong></p>
<p>Me comenta Marc Palau (y con toda la razón) que el ejemplo anterior no es válido porque <em>onLoad</em> no es lanzado hasta que carga toda la página, incluidas las imágenes. En este caso, nunca seran llamados los eventos <em>onLoad</em> de las imágenes porque se están definiendo después de haberlas cargado.</p>
<p>Para reproducir el error, he preparado <a href="http://lab.daveruiz.net/jquery.problema_onload/">una prueba</a> en la que se testea el framework <strong>jQuery</strong> y la función <strong><a href="http://www.thefutureoftheweb.com/blog/adddomloadevent">addDOMLoadEvent</a></strong> (el ejemplo que ponen en el enlace añade la imagen dinámicamente y no lo reproduce). Del mismo modo, se presenta una solución para ambas basados en el mismo procedimiento comentado antes.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.daveruiz.net/programacion/cuando-onload-no-es-lanzado/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>¿Internet Explorer 8 respeta las normas?</title>
		<link>http://blog.daveruiz.net/general/internet-explorer-8-respeta-las-normas/</link>
		<comments>http://blog.daveruiz.net/general/internet-explorer-8-respeta-las-normas/#comments</comments>
		<pubDate>Wed, 19 Dec 2007 21:58:58 +0000</pubDate>
		<dc:creator>Dave Ruiz</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[acid 2]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[estardares]]></category>
		<category><![CDATA[internet explorer]]></category>
		<category><![CDATA[microsoft]]></category>

		<guid isPermaLink="false">http://blog.daveruiz.net/general/%c2%bfinternet-explorer-8-respeta-las-normas/</guid>
		<description><![CDATA[Pues al parecer eso es lo que nos cuentan. Por fin, este navegador será capaz de renderizar correctamente el test Acid 2, dando a entender que respeta el estándar CSS. Yo por mi parte desconfiaré hasta que pueda probarlo, dada la experiencia con Microsoft. Espero que no se olviden de Javascript. Programar para varios navegadores [...]]]></description>
			<content:encoded><![CDATA[<p>Pues al parecer eso es lo que nos cuentan. Por fin, este navegador será capaz de renderizar correctamente el test <a href="http://www.webstandards.org/action/acid2/" target="_blank">Acid 2</a>, dando a entender que respeta el estándar <a href="http://es.wikipedia.org/wiki/CSS" target="_blank">CSS</a>. Yo por mi parte desconfiaré hasta que pueda probarlo, dada la experiencia con Microsoft.</p>
<p>Espero que no se olviden de <a href="http://es.wikipedia.org/wiki/JavaScript" target="_blank">Javascript</a>. Programar para varios navegadores distintos un mismo lenguaje resulta bastante aburrido. Pero esto es otro cantar &#8230;</p>
<p>Visto en  <a href="http://blogs.msdn.com/ie/archive/2007/12/19/internet-explorer-8-and-acid2-a-milestone.aspx" target="_blank">http://blogs.msdn.com/ie/archive/2007/12/19/internet-explorer-8-and-acid2-a-milestone.aspx</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.daveruiz.net/general/internet-explorer-8-respeta-las-normas/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

