substr () con valore negativo non funzionante in IE

EDIT: Ho cambiato il titolo, perché il problema non ha niente a che fare con IE image.load () che spara – il mio substr () non funzionava (vedi risposta accettata).


C'è un sacco di post per assicurarsi di definire il tuo gestore di onload prima di assegnare img.src al fine di garantire che il gestore di onload sia in atto nel caso in cui l'image venga caricata prima dalla cache.

Questo non sembra essere il problema nel mio codice, dato che è proprio quello che ho fatto.

Si noti che questo script funziona in tutti gli altri browser, ma IE 8 e inferiore non triggersno la function onload inline.

var i = lastSlideIndex || 1; while(imagesQueued < MAX_IMAGES){ var preloadImage = new Image(); preloadImage.arraysIndex = i; preloadImage.onload = function(eventObj){ debug('Image ' + this.src + ' loaded.'); slideshowImages[this.arraysIndex] = this; if (this.arraysIndex > lastImageIndex) lastImageIndex = this.arraysIndex; triggerSlideshow(this.arraysIndex); } // 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++; } 

Qualsiasi altro suggerimento sarebbe profondamente apprezzato!

Aggiornamento: Come hanno commentato i commentatori (e non posso dimostrarlo altrimenti per ora), ho rimosso il primo suggerimento.

Coppia di cose da notare:

onload evento onload non si spegnerà se l'image viene caricata dalla cache. Provare a cancellare la tua cache e riprovare.

Un altro problema è che IE non piace negativo in substr . Utilizza invece la slice :

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

Ora che questa domanda è retitled per essere circa substr() in IE 8, ecco la correzione rapida al problema dell'indice negativo. Incollare il codice riportto di seguito da 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); }; 

Questo codice rileva l'implementazione rotta di substr e la sostituisce con un conforms.

Due modi per affrontare questo problema:

  1. Aggiungere un parametro nonce ai tuoi URL image.

     var nonce = new Date().getTime(); // ... preloadImage.src = fullImagePrefix + imageNumber + "." + IMAGES_TLA + ('?_=' + nonce++); 
  2. Impostare la properties; "src" in un ciclo di events diverso.

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

Utilizzando un parametro nonce each volta che si riceve un'image, si ignora la cache. Ora, probabilmente non è una grande idea, quindi la seconda opzione si aggirerà nel problema assicurandosi che la properties; "src" sia impostata in un ciclo di events distinto. Quindi il "carico" si attiverà.

Ecco un esempio. Il codice utilizza nonces su alcune immagini ma imposta la "src" per tutti in un gestore di timeout. Come potete vedere, tutti si caricano (diventano rossi).

Non so perché IE non spara il gestore di "carico" quando l'image è in cache, ma quando la "src" viene impostata in un ciclo di events diverso da where l'object image è (in caso contrario) inizializzato.

edit – Ecco lo stesso violino, ma modificato per saltare il timeout. In IE8, dovresti notare che le immagini con numero pari non ricevono spesso una chiamata ai gestori di "carico".