6

编辑：我更改了标题，因为该问题与 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++;
}

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

4

3 回答 3

11

现在这个问题substr()在 IE 8 中被重新命名为 about，这里是对负索引问题的快速修复。从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);
};

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

于 2013-02-13T03:22:15.373 回答
9

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

还有几点需要注意：

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

另一个问题是 IE 不喜欢substr. 改用slice：

"0000000".slice(-(String(MAX_IMAGES).length));
于 2011-08-02T21:38:14.083 回答
1

两种处理方法：

  1. 向您的图像 URL 添加一个 nonce 参数。

    var nonce = new Date().getTime();

// ...

preloadImage.src = fullImagePrefix + imageNumber + "." + IMAGES_TLA + ('?_=' + nonce++);

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

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

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

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

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

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

于 2011-08-02T22:21:52.693 回答