Précharger des images avec Image

Je ne suis pas sûr que ça marche à 100%...

Sujet résolu

8 mai 2010 à 12:38:16

Hello

J'ai fait un site pour mon père il y a peu, et il est hébergé sur un serveur à moi, dans la campagne, qui a une connexion très réduite.
Du coup le diaporama sur le site est très long et je voudrais précharger les images quand on démarre la page plutôt qu'à l'affichage.

J'ai fait cette fonction-là, appelée sur onload de la balise <body> :

function precharger_imgs()
{
    var i = 0;
    var grande = new Image();
    var vignette = new Image();

    if (imgs.length == 0)
        return;

    grande.src = pre_diap+imgs[i];
    vignette.src = pre_vign+imgs[i];

    grande.onload = function()
    {
        i++;
        if (i < imgs.length)
            grande.src = pre_diap+imgs[i];
    }

    vignette.onload = function()
    {
        i++;
        if (i < imgs.length)
            vignette.src = pre_vign+imgs[i];
    }
}

A noter que imgs, pre_diap et pre_vign sont des variables globales déclarées avec PHP.

La page est celle-là : http://www.as3r.fr/diaporama-1.html

(vous pourrez y voir le Javascript en entier)

Le script semble marcher, car au lancement de la page j'ai de nombreux "en attente de photos.as3r.fr..." dans la barre d'état de firefox, et les premières photos s'affichent suasi instantanément.
Mais ce n'est pas le cas pour toutes les photos, c'est un peu bizarre...

J'aimerais que vous alliez sur la page, que vous testiez, et que vous me disiez si ça marche correctement chez vous ou pas.
Au passage, si vous voyez une erreur flagrante dans le code, donnez-la moi

Voilà, merci d'avance !

Tillertan

8 mai 2010 à 13:11:26

Ton script ne marche qu'à moitier, car tu incrémentes i dans les deux onload, donc du coup, le premier qui fini bloque l'autre.

function precharger_imgs ()
{
    var i = 0;
    var j = 0;
    var grande = new Image();
    var vignette = new Image();

    if (imgs.length == 0)
	return;

    grande.src = pre_diap+imgs[i];
    vignette.src = pre_vign+imgs[i];

    grande.onload = function()
    {
	j++;
	if (j < imgs.length)
	    grande.src = pre_diap+imgs[j];
    }

    vignette.onload = function()
    {
	i++;
	if (i < imgs.length)
	    vignette.src = pre_vign+imgs[i];
    }
}

Saimoun

8 mai 2010 à 17:36:28

Rha, quel con

Cette fois ça marche nickel, même si faut attendre presque 15 minutes pour que toutes les photos se chargent

Merci

Saimoun