préchargement de l'image avec tableau

Question

J'utilise le code suivant pour précharger les images dans une galerie d'images:

$ (fenêtre) .bind ('charge', function() {

var imageNumber = $(".image").attr("alt"); 
var imageUp = parseInt(imageNumber) + 1 
var imageUp2 = parseInt(imageNumber) + 2  
var imageDown = parseInt(imageNumber) - 1 
var preload = [ 
    'image' + imageUp + '.jpg', 
    'image' + imageUp2 + '.jpg', 
    'image' + imageDown + '.jpg', 
    ]; 

    $(document.createElement('img')).bind('load', function(){ 
    if(preload[0]) this.src = preload.shift(); 
    }).trigger('load');   

}); J'ai modifié un autre script de préchargement javascript/jQuery de base, en ajoutant des variables pour obtenir une valeur numérique de l'alt-tag de l'image en cours et précharger les images immédiatement avant et après (n + 1 n + 2 n-1) dans la galerie. Cela fonctionne, même si j'imagine que c'est peut-être moche. Ce que je veux faire est ajouter ou appeler un autre tableau contenant toutes les images dans le répertoire, de sorte qu'après le chargement des images précédentes et suivantes, la page en cours continue à précharger d'autres images, les sauvant dans les navigateurs visualisation lorsque l'utilisateur se déplace dans la galerie.

Idéalement, ce second tableau serait appelé à partir d'un fichier .js externe, afin d'éviter d'avoir à mettre à jour chaque page individuellement. (Ou peut-être serait-il plus facile d'enregistrer le script entier dans un fichier .js externe pour chaque répertoire et de remplir le reste du tableau en fonction du contenu de ce répertoire?).

Le design web n'est qu'un passe-temps pour moi (je suis photographe), donc ma connaissance de javascript est limitée - juste assez pour personnaliser les fonctions pré-construites et les bribes de collages de code.

J'apprécierais vraiment que quelqu'un puisse me diriger dans la bonne direction sur la façon de modifier mon code.

Merci à l'avance,

Thom

Answer 1

Je n'ai jamais utilisé un script de pré-charge jQuery, mais je l'ai fait beaucoup de préchargement avec javascript « vanille ». Essayez le code que j'ai ajouté ci-dessous, cela pourrait peut-être résoudre votre problème.

function preLoad() { // my preload function; 
    var imgs = arguments, imageFolder = []; 

    for (var i = 0; i < imgs.length; i += 1) { 
     imageFolder[i] = new Image(); 
     imageFolder[i].src = imgs[i]; 
    } 
} 

var gallary = []; // all gallary images 

$(window).bind('load', function(){ 

var imageNumber = $(".image").attr("alt"); 
var imageUp = parseInt(imageNumber) + 1 
var imageUp2 = parseInt(imageNumber) + 2  
var imageDown = parseInt(imageNumber) - 1 
var preload = [ 
    'image' + imageUp + '.jpg', 
    'image' + imageUp2 + '.jpg', 
    'image' + imageDown + '.jpg', 
    ]; 

    $(document.createElement('img')).bind('load', function(){ 
    if(preload[0]) this.src = preload.shift(); 
    }).trigger('load'); 

    preLoad(gallary); // preload the whole gallary 
}); 

EDIT

preLoad(): cette fonction accepte urls d'image comme arguments, par exemple preLoad('image_one.jpg', 'image_two.jpg','image_thre.jpg');

La fonction de préchargement a deux variables var imgs et var imageFolder, DHCEU stocke toutes les images urls et imageFolder stocke les objets image, c'est-à-dire, préchargez les images chargées.