Note that there are some explanatory texts on larger screens.

plurals
  1. POimage load event randomly firing in IE7/8
    primarykey
    data
    text
    <p>Situation:</p> <p>I am resizing / preloading images with javascript before showing them on the page.</p> <p>Problem:</p> <p>ie7 / 8 tend to randomy fire the load event for some images and not for others (this is completely random and different on every refresh)</p> <p>Code:</p> <p>JS:</p> <pre><code>$(document).ready(function(){ $(".daImg").hide(); $("figure").each(function(){ $(this).append('&lt;div class="loader"&gt;&lt;img src="images/ajax-loader.gif"&gt;&lt;/div&gt;'); var afb = $(this).find(".daImg"); afb.load(function(){ console.log("loaded"); $(this).parent().parent().parent().find(".loader").remove(); if($(this).parent().parent().parent().is(".last")){ if(afb.height() &gt; 280){ var w = (afb.width()/afb.height())*280 afb.css("width",w); afb.css("height","280px"); } } else { if(afb.height() &gt; 245){ var w = (afb.width()/afb.height())*245 afb.css("width",w); afb.css("height","245"); } } afb.css("left","50%"); afb.css("margin-left","-"+afb.width()/2+"px"); afb.fadeIn(); }) }); } </code></pre> <p>HTML</p> <pre><code> &lt;figure class="left"&gt; &lt;a href="foobar.html"&gt; &lt;div class="imageWrap"&gt; &lt;img class="daImg" src="foo-bar.png" alt="foobar" /&gt; &lt;/div&gt; &lt;figcaption class="cufonize"&gt;&lt;span class="decorated"&gt;foobar&lt;/span&gt;&lt;br&gt; &lt;span class="price"&gt;99&lt;/span&gt; &lt;/figcaption&gt; &lt;/a&gt; </code></pre> <p></p> <pre><code>&lt;figure class="left"&gt; &lt;a href="foobar.html"&gt; &lt;div class="imageWrap"&gt; &lt;img class="daImg" src="foo-bar.png" alt="foobar" /&gt; &lt;/div&gt; &lt;figcaption class="cufonize"&gt;&lt;span class="decorated"&gt;foobar&lt;/span&gt;&lt;br&gt; &lt;span class="price"&gt;99&lt;/span&gt; &lt;/figcaption&gt; &lt;/a&gt; </code></pre> <p></p> <pre><code>&lt;figure class="left"&gt; &lt;a href="foobar.html"&gt; &lt;div class="imageWrap"&gt; &lt;img class="daImg" src="foo-bar.png" alt="foobar" /&gt; &lt;/div&gt; &lt;figcaption class="cufonize"&gt;&lt;span class="decorated"&gt;foobar&lt;/span&gt;&lt;br&gt; &lt;span class="price"&gt;99&lt;/span&gt; &lt;/figcaption&gt; &lt;/a&gt; </code></pre> <p></p> <pre><code>&lt;figure class="left"&gt; &lt;a href="foobar.html"&gt; &lt;div class="imageWrap"&gt; &lt;img class="daImg" src="foo-bar.png" alt="foobar" /&gt; &lt;/div&gt; &lt;figcaption class="cufonize"&gt;&lt;span class="decorated"&gt;foobar&lt;/span&gt;&lt;br&gt; &lt;span class="price"&gt;99&lt;/span&gt; &lt;/figcaption&gt; &lt;/a&gt; </code></pre> <p></p> <pre><code>&lt;figure class="left"&gt; &lt;a href="foobar.html"&gt; &lt;div class="imageWrap"&gt; &lt;img class="daImg" src="foo-bar.png" alt="foobar" /&gt; &lt;/div&gt; &lt;figcaption class="cufonize"&gt;&lt;span class="decorated"&gt;foobar&lt;/span&gt;&lt;br&gt; &lt;span class="price"&gt;99&lt;/span&gt; &lt;/figcaption&gt; &lt;/a&gt; </code></pre> <p></p> <p>If anyone could shed some light of what is going on here, I'd appreciate it! </p> <p>Note: This issue has nothing to do with caching as I am adding time-stamps to all images in my actual code.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload