substr() with negative value not working in IE

Question

EDIT:I've changed the title, because the issue had nothing to do with IE image.load() firing - my substr() wasn't working (see accepted answer).

---

There's a ton of posts about making sure that you define your onload handler prior to assigning img.src in order to guarantee that the onload handler is in place in case the image is loaded from cache first.

This does not appear to the be issue in my code, since that's precisely what I have done.

Note that this script works across all other browsers, but IE 8 and lower does not trigger the onload inline function.

var i = lastSlideIndex || 1;

while(imagesQueued < MAX_IMAGES){
    var preloadImage = new Image();
    preloadImage.arrayIndex = i;
    preloadImage.onload = function(eventObj){
        debug('Image ' + this.src + ' loaded.');
        slideshowImages[this.arrayIndex] = this;
        if (this.arrayIndex > lastImageIndex) lastImageIndex = this.arrayIndex;
        triggerSlideshow(this.arrayIndex);
    }

    // add leading zeros
    var leadingZeros = "0000000".substr(-(String(MAX_IMAGES).length));
    imageNumber = leadingZeros.substr(String(i).length) + i;

    debug('preloading Image #' + imageNumber);
    preloadImage.src = fullImagePrefix + imageNumber + "." + IMAGES_TLA;

    if (++i > MAX_IMAGES) i = 1;
    imagesQueued++;
}

Any other suggestions would be deeply appreciated!

Answer 1

Now that this question is retitled to be about substr() in IE 8, here's the quick fix to the negative index problem. Paste the following code from Mozilla Developer Network:

// only run when the substr() function is broken
if ('ab'.substr(-1) != 'b') {
  /**
   *  Get the substring of a string
   *  @param  {integer}  start   where to start the substring
   *  @param  {integer}  length  how many characters to return
   *  @return {string}
   */
  String.prototype.substr = function(substr) {
    return function(start, length) {
      // call the original method
      return substr.call(this,
        // did we get a negative start, calculate how much it is from the beginning of the string
        // adjust the start parameter for negative value
        start < 0 ? this.length + start : start,
        length);
    }
  }(String.prototype.substr);
};

This code detects the broken implementation of substr and replaces it with a compliant one.

Answer 2

Update: As commenters have pointed out (and I can't prove them otherwise for now), I removed the first suggestion.

Couple of more things to note:

onload event will not fire if the image is being loaded from cache. Try clearing your cache and retry.

Another problem is that IE doesn't like negative in substr. Use slice instead:

"0000000".slice(-(String(MAX_IMAGES).length));

Answer 3

Two ways of dealing with this:

1. Add a nonce parameter to your image URLs.

   var nonce = new Date().getTime();
   
   // ...
   
   preloadImage.src = fullImagePrefix + imageNumber + "." + IMAGES_TLA + ('?_=' + nonce++);
   

2. Set the "src" property in a different event loop.

   setTimeout(function(img, src) {
     img.src = src;
   }(preloadImage, fullImagePrefix + imageNumber + "." + IMAGES_TLA), 1);
   

By using a nonce parameter each time you fetch an image, you bypass the cache. Now, that's probably not such a great idea, so the second option gets around the problem by making sure that the "src" property is set in a separate event loop. The "load" will trigger then.

Here is an example. The code uses nonces on some images but sets the "src" for all of them in a timeout handler. As you can see, they all load (turn red).

I don't know why IE doesn't fire the "load" handler when the image is in cache, but it does when the "src" is set in a different event loop from where the image object is (otherwise) initialized.

edit — Here is that same fiddle, but modified to skip the timeout. In IE8, you should notice that the even-numbered images often don't get a call made to the "load" handlers.