Que puis-je faire pour que Mozilla Firefox précharge l'image finale?

Question

Je tente de précharger des images en utilisant JavaScript. Je l'ai déclaré un tableau comme suit avec des liens d'image de différents endroits:

var imageArray = new Array(); 
imageArray[0] = new Image(); 
imageArray[1] = new Image(); 
imageArray[2] = new Image(); 
imageArray[3] = new Image(); 
imageArray[0].src = "http://www.bollywoodhott.com/wp-content/uploads/2008/12/arjun-rampal.jpg"; 
imageArray[1].src = "http://labelleetleblog.files.wordpress.com/2009/06/josie-maran.jpg"; 
imageArray[2].src = "http://1.bp.blogspot.com/_22EXDJCJp3s/SxbIcZHTHTI/AAAAAAAAIXc/fkaDiOKjd-I/s400/black-male-model.jpg"; 
imageArray[3].src = "http://www.iill.net/wp-content/uploads/images/hot-chick.jpg"; 

L'image se fanent et les effets de transformation que je fais en utilisant ce travail de tableau correctement pour les 3 premières images, mais pour la dernière, imageArray[3], les données d'image réelles de l'image ne sont pas préchargées et cela ruine complètement l'effet, puisque les données d'image réelles se chargent par la suite, seulement au moment où il doit être affiché, semble-t-il.

Cela se produit parce que le dernier lien http://www.iill.net/wp-content/uploads/images/hot-chick.jpg n'est pas un lien direct vers l'image. Si vous accédez à ce lien, votre navigateur vous redirigera vers l'emplacement réel. Maintenant, mon code de préchargement d'image dans Chrome fonctionne parfaitement bien, et les effets sont superbes. Parce qu'il semble que Chrome précharge les données réelles - l'image EVENTUAL qui doit être affichée. Cela signifie que dans Chrome si j'ai préchargé une image qui redirigera pour «arrêter de voler ma bande passante», l'image préchargée est «arrête de voler ma bande passante».

Comment puis-je modifier mon code pour que Firefox se comporte de la même manière?

Answer 1

Pourquoi ne pas mettre une image sur la page sans source, et le cacher:

<img src='' id='preLoadImage1' style='display: none' /> 

Maintenant, dans votre Javascript, charger l'image:

document.getElementById('preLoadImage1').src = ''; 

Ensuite, vous pouvez Placez cette img dans le div plus tard.

Answer 2

Je pense que vous êtes du mauvais côté de ce problème ~ Quelle que soit la méthode que vous utilisez peut éventuellement être contrée par l'hôte de l'image. Pourquoi ne pas enregistrer une copie sur un hôte que vous contrôlez?

Cela dit, vous pouvez essayer

<img src="hotlink" style="visibility:hidden;position:absolute;margin-top:-1000px;" /> 

Cela peut se FireFox pour mettre en cache l'image.

Answer 3

Je suggère d'utiliser un ul avec les éléments li enfant qui contiennent les images pertinentes. Style le ul avec display: none (ou, alternativement, position: absolute hors de la page) et les images doivent encore être chargées par le navigateur, indépendamment d'être, pour l'essentiel, invisible pour l'utilisateur.

Un peu façon désordonnée de le faire, avec votre code actuel, est illustré à JS Fiddle, les JS pertinentes ci-dessous:

var imageArray = new Array(); 
imageArray[0] = new Image(); 
imageArray[1] = new Image(); 
imageArray[2] = new Image(); 
imageArray[3] = new Image(); 

imageArray[0].src = "http://www.bollywoodhott.com/wp-content/uploads/2008/12/arjun-rampal.jpg"; 
imageArray[1].src = "http://labelleetleblog.files.wordpress.com/2009/06/josie-maran.jpg"; 
imageArray[2].src = "http://1.bp.blogspot.com/_22EXDJCJp3s/SxbIcZHTHTI/AAAAAAAAIXc/fkaDiOKjd-I/s400/black-male-model.jpg"; 
imageArray[3].src = "http://www.iill.net/wp-content/uploads/images/hot-chick.jpg"; 

// the below stuff is the new: 

var newList = document.createElement('ul'); 
newList.setAttribute('id', 'imgPreload'); 

var preload = document.getElementById('preload'); 
preload.appendChild(newList); 
var imgPreload = document.getElementById('imgPreload'); 

var li = document.createElement('li'); 

for(i=0; i<imageArray.length; i++){ 
    imgPreload.appendChild(li).appendChild(imageArray[i]); 
} 

Il est évident que la peau ci-dessus ne pas créé ul, mais de montrer de la démo une façon de créer dynamiquement. Certes, aussi, je l'ai seulement testé jusqu'à présent dans Chrome.