Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Your initial function would have run straight into an infinite loop if you didn't have <code>$(this).remove()</code>. Essentially what you were doing was setting the <code>src</code> attribute to <strong>all</strong> <code>img</code> tags, including the preload image itself. (replace <code>$(this).remove()</code> with <code>console.log('loaded')</code> and watch it loop infinitely in Firebug)</p> <p>I would guess that in IE8, once the attribute is set to the preload image as well, it invoked your 'load' event handler first <strong>before</strong> executing the next line which is <code>$(this).remove()</code> (explaining the stack overflow), while other browsers might have first finished executing the entire function first, thus removing the preload image, which prevented the infinite loop. (This is just a guess)</p> <p>A monkey patch to the initial version would be to use <code>.find('img:not(#preload)')</code> instead of just <code>.find('img')</code>.</p> <p>Your patch also prevents the infinite loop because <code>.one()</code> ensures it to only run once.</p> <p>But ultimately I would refactor the function to the following:</p> <pre><code>function switchImage(size, objid, prefix, fullimage){ var $el = $('#' + objid), $image = $el.find('img'), $preload = $('&lt;img&gt;'); if(size !== 'full'){ var image = prefix + size + '/' + size +'_' + fullimage; } else { var image = prefix + size + '/' + fullimage; } $el.data('type', size); $preload .on('load', function () { $image.attr('src', image); }) .attr('src', image); } </code></pre> <p>Also note that the preload image actually does not need to be explicitly appended to the DOM to serve your purpose.</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.
    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