Problème avec le diaporama JavaScript dégradable

MISE À JOUR: J'ai modifié le code ci-dessous pour montrer ce que j'utilisais lorsque j'ai essayé de travailler avec la visibilité CSS. Je suis toujours coincé avec ce problème. J'ai également essayé de supprimer la fonction preloader() du corps onLoad, mais je ne peux pas utiliser getElementById car l'élément n'a pas été chargé. Ma dernière pensée était d'appeler simplement rand (5) depuis le HTML lui-même afin qu'il ajoute un nombre à la fin du nom de fichier de l'image si Javascript est activé, mais je ne suis même pas sûr de savoir comment l'incorporer directement dans le HTML. Toute aide serait grandement appréciée!Problème avec le diaporama JavaScript dégradable

J'ai créé un diaporama avec Javascript. Le HTML appelle une image statique à afficher dans l'événement Javascript n'est pas activé dans le navigateur. Si Javascript est activé dans le navigateur, il est supposé charger une image aléatoire à la place de l'image statique.

Le problème que je rencontre est quand Javascript est activé, vous voyez l'image statique charger avec la page et puis, si l'image aléatoire est différente, vous la voyez charger rapidement après cela. Donc, il semble que deux images cyclent rapidement sur le chargement de la page.

Voici le code Javascript J'utilise:

// Define images used in slideshow 
imgArray = new Array(
"header_img1.jpg", 
"header_img2.jpg", 
"header_img3.jpg", 
"header_img4.jpg", 
"header_img5.jpg" 
); 
baseURL = "images/"; 

// Preload slideshow images 
function preloader() { 

    domElement = document.getElementById('gallery-image'); 
    domElement.style.visibility = "hidden"; 

    // counter 
    var i = 0; 

    // create object 
    imageObj = new Image(); 

    // start preloading imgArray 
    for (i=0; i<3; i++) { 
     imageObj.src=imgArray[i]; 
    } 
} 


// Select random image to display for slideshow 
function random_img() { 

    domElement.style.visibility = "visible"; 
    rand = Math.round(Math.random()*(imgArray.length - 1)); 
    document["faces"].src = baseURL + imgArray[rand]; 
    rand += 1; 
}

Voici le code HTML d'accompagnement:

<body onLoad="preloader();random_img();"> 
. 
. 
. 
<a href="#" onclick="f_slideshow(-1);return false;"> 
<img src="images/header_img1.png" alt="" width="26" height="207" /></a> 
<img src="images/header_img1.jpg" alt="" width="529" height="197" class="img-1" name="faces" /> 
<a href="#" onclick="f_slideshow(1);return false;"> 
<img src="images/header_img2.png" alt="" width="27" height="207" /></a>

Comment puis-je changer ce que j'ai donc quand Javascript est activé, vous n » t voir les deux images de cyclisme?

Source

2011-02-16 Yazmin

Voici le code JavaScript qui a résolu mon problème:

// Define images used in slideshow 
imgArray = new Array(
    "header_img1.jpg", 
    "header_img2.jpg", 
    "header_img3.jpg", 
    "header_img4.jpg", 
    "header_img5.jpg" 
); 
baseURL = "images/"; 


// Hide static image and preload slideshow images 
function preloader() { 

    // counter 
    var i = 0; 

    // create object 
    imageObj = new Image(); 

    // start preloading imgArray 
    for (i=0; i<3; i++) { 
     imageObj.src=imgArray[i]; 
    } 

} 

// Control previous/next functions of slideshow 
numImages = imgArray.length; 
function f_slideshow(xflip) { 

    // grab source of current image 
    var curImage = document["faces"].src; 

    // get image number from string and convert to int 
    curImage = parseInt(curImage.substring(curImage.length-5, curImage.length)); 

    // create source for next/previous link 
    curImage = curImage + xflip; 
    if (curImage > numImages) 
     { curImage = 1 ; } 
    if (curImage == 0) 
     { curImage = numImages ; }  
    document["faces"].src = baseURL + imgArray[curImage - 1]; 
}

Source

2011-06-17 22:32:54 Yazmin

Dans votre preLoader(), utilisez le style pour masquer les éléments que vous souhaitez masquer si le javascript est activé. De cette façon, si elle est activée, les éléments se cacheront, si ce n'est pas le cas, le javascript pour les cacher ne fonctionnera pas.

exemple

var domElement = document.getElementById('id-of-element'); 

domElement.style.display = 'none';

Source

2011-02-16 17:27:44 jondavidjohn

Merci! C'était un pas dans la bonne direction. J'ai manipulé la visibilité à la place de sorte que l'image occupait toujours le même espace et rendait l'élément visible au début de 'random_img()'. Fonctionne comme un charme. J'apprécie ton aide! – Yazmin

Y at-il une raison pour laquelle vous avez annulé cette réponse? – jondavidjohn

Oui. J'étais en train d'écrire l'explication quand j'ai été appelé. J'ai échoué à vérifier cette solution dans Firefox. Je vois encore la charge initiale de l'image, puis la charge de l'image aléatoire après cela. Voici le site avec le numéro: http://yazminmedia.com/clients/wbailey/index.html – Yazmin

Problème avec le diaporama JavaScript dégradable

Répondre

Questions connexes