Javascript 具有负值的substr（）在IE中不起作用

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

---

关于确保在分配img.src之前定义onload处理程序，以确保在首先从缓存加载映像的情况下onload处理程序处于适当位置，有很多文章都是关于这一点的

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

请注意，此脚本可以跨所有其他浏览器工作，但IE8及更低版本不会触发onload inline函数

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

var i=lastSlideIndex | | 1；
while（imagesQueuedlastImageIndex）lastImageIndex=this.arrayIndex；
triggerSlideshow（this.arrayIndex）；
}
//添加前导零
var leadingZeros=“0000000”.substr（-（字符串（最大图像）.length））；
imageNumber=leadingZeros.substr（字符串（i）.长度）+i；
调试（'预加载图像#'+图像编号）；
PRELOIMAGE.src=fullImagePrefix+imageNumber+“”+IMAGES\u TLA；
如果（++i>MAX_图像）i=1；
图像压缩++；
}

---

任何其他建议将不胜感激

更新：正如评论人士指出的那样（目前我无法证明他们不是这样），我删除了第一条建议

还有几件事需要注意：

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

另一个问题是IE不喜欢

substr

中的负数。使用

切片

：

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

---

有两种处理方法：

将nonce参数添加到图像URL

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

// ...

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

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

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

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

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

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

---

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

在IE8中，这个问题被重新命名为关于

substr（）

，下面是负索引问题的快速解决方案。从中粘贴以下代码：

//仅在substr（）函数中断时运行
如果（'ab'.substr（-1）！='b'）{
/**
*获取字符串的子字符串
*@param{integer}start子字符串的起始位置
*@param{integer}length返回多少个字符
*@return{string}
*/
String.prototype.substr=函数（substr）{
返回函数（开始、长度）{
//调用原始方法
返回substr.call（此，
//我们是否得到了一个负的开始，计算它从字符串开始有多少
//将启动参数调整为负值
开始<0？此长度+开始：开始，
长度）；
}
}（String.prototype.substr）；
};

---

此代码检测到substr的中断实现，并将其替换为兼容的实现。

不，这根本不是真的。IE确实支持图像对象实例上的“加载”事件。毕竟，如果不这样做，你的建议也不会奏效。是JSFIDLE。我同意Pointy。事实并非如此。IE（所有版本）支持图像的加载处理程序。另一个JSFIDLE证明了这一点：。同样，你错了。只要您在设置.src属性之前设置了加载处理程序，当映像来自缓存时，onload就会触发。@jfriend00关于这一点，我不太确定。看我的答案。@Pointy，不太确定什么？我一直在IE中使用从IE6到IE9的版本的onload处理程序，如果你做得正确，它们绝对可以工作——不管映像是否缓存。我真的不确定你看到了什么，你认为IE8在没有使用超时和nonce的情况下无法调用load处理程序。在没有nonce和timeout的JSFIDLE中，我总是看到在我的IE8副本中调用的加载处理程序。我有一个javascript幻灯片，它依赖于加载处理程序（如果加载处理程序不启动，它将不会显示图像），并且它在数百个网站（包括我自己的网站）上使用，我从来没有在IE8上加载图像的问题报告。当您看到它失败时，一定会发生其他事情。仅供参考，如果您没有对示例的load handler部分使用jQuery，那么这将更容易解决根本问题。既然我们谈论的是裸体加载处理程序，如果这就是其中的全部内容，那就太好了。下面是我的纯JS提琴：它使用onload处理程序加载6个图像，不使用nonce，也不使用setTimeout。我不能让它错过IE8中的onload处理程序@Pointy-你在IE8中看到了失败吗？谢谢@Pointy的建议。请注意，Mozilla不建议延迟1，因此请注意（最小延迟DOM_MIN_TIMEOUT_值为4ms（存储在Firefox的首选项中：DOM.MIN_TIMEOUT_值），DOM_CLAMP_TIMEOUT_NESTING_级别为5ms。）此外，您是否打算将闭包用作setTimeout（）中的第一个参数。感谢Josh捡起这条旧帖子并发布了一些非常有用的东西！另一种选择是只替换

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