具有负值的 substr() 在 IE 中不起作用

Question

编辑：我更改了标题，因为该问题与 IE image.load() 触发无关 - 我的 substr() 不起作用（请参阅接受的答案）。

---

有大量关于确保在分配 img.src 之前定义 onload 处理程序的帖子，以确保 onload 处理程序就位，以防首先从缓存加载图像。

这在我的代码中似乎不是问题，因为这正是我所做的。

请注意，此脚本适用于所有其他浏览器，但 IE 8 及更低版本不会触发 onload 内联函数。

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++;
}

任何其他建议将不胜感激！

Answer 1

现在这个问题被重新命名为关于 IE 8 中的 substr()，下面是负索引问题的快速修复。粘贴 中的以下代码Mozilla 开发者网络：

// 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);
};

此代码检测 substr 的损坏实现并将其替换为兼容的实现。

Answer 2

更新：正如评论者所指出的（我现在无法证明他们），我删除了第一个建议。

还有几点需要注意：

如果从缓存加载图像，则不会触发 onload 事件。尝试清除缓存并重试。

另一个问题是 IE 不喜欢 substr 中的负数。使用 slice 代替：

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

Answer 3

处理此问题的两种方法：

1. 向图像 URL 添加随机数参数。

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

2. 在不同的事件循环中设置“src”属性。

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

通过在每次获取图像时使用随机数参数，您可以绕过缓存。现在，这可能不是一个好主意，因此第二个选项通过确保在单独的事件循环中设置“src”属性来解决该问题。然后将触发“负载”。

这里是一个示例。该代码在某些图像上使用随机数，但在超时处理程序中为所有图像设置“src”。如您所见，它们全部加载（变成红色）。

我不知道为什么 IE 在图像位于缓存中时不触发“load”处理程序，但当“src”设置在与图像对象（否则）初始化的事件循环不同的事件循环中时，它会触发“load”处理程序。

编辑 - 这里是同一个小提琴，但经过修改以跳过超时。在 IE8 中，您应该注意到偶数图像通常不会调用“加载”处理程序。