Avatar billede passiflora Juniormester
12. september 2010 - 17:08 Der er 8 kommentarer og
1 løsning

Preload af billeder i js slideshow og explore fejl

Hej

Jeg fandt et lille JS slideshow på nettet, da mine evner i forhold til js er temlig begrænset (manglende)

Kunne man mon rimelig let tilføje scriptet et preload af billederne?

Startede med at teste det i FF, virker fint, men virker ikke i IE, nogen der kan hjælpe med det også.

På forhånd tak.

/Søren

Herunder koden:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Brander</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<base target="_top" />
<script type="text/JavaScript" src="mine_scripts.js"></script>
</head>

<body >
<span id="slideshow" style="position: relative">
<img src="1.jpg" style="position: absolute; top: 0px; left: 200px" >
<img src="2.jpg" style="position: absolute; top: 0px; left: 200px" >
<img src="3.jpg" style="position: absolute; top: 0px; left: 200px" >
<img src="4.jpg" style="position: absolute; top: 0px; left: 200px" >
<img src="5.jpg" style="position: absolute; top: 0px; left: 200px" >
</span>
<script>
window.addEvent('load', function() {new SlideShow(document.getElementById('slideshow'), 40, 500, false);});
</script> 
</body>
</html>


og her min tilknyttede js fil


Object.prototype.addEvent = function(evtType, func) {
  if (this.addEventListener) {
      this.addEventListener(evtType, func, true);
  } else if (this.attachEvent) {
      this.attachEvent('on' + evtType, func);
  } else {
      this['on' + evtType] = func;
  }
}

function SlideShow(slideel, faddingSpeed, stopTime, stopOnMouseOver) {   
    var mouseIsOver = false;
   
    if (stopOnMouseOver) {
        slideel.addEvent('mouseover', function() {
            mouseIsOver = true;
        });

        slideel.addEvent('mouseout', function() {
            mouseIsOver = false;
            self.next();
        });
    }
       
    this.next = function() {
        if (mouseIsOver)
            return;

        this.current.fadeOut();
        this.current = this.current.nextSlide;
        this.current.fadeIn();
    }
   
    function createSlides() {
        var imgs = slideel.getElementsByTagName('img');
        var slides = [];
       
        for (var i = 0; i < imgs.length; i++) {       
            slides[i] = new SlideShowImage(imgs[i], self);
        }
       
        for (var i = 0; i < slides.length; i++) {
            if (i == slides.length - 1)
                slides[i].nextSlide = slides[0];
            else
                slides[i].nextSlide = slides[i + 1];
        }
       
        self.current =     slides[0];
        slides[0].fadeIn();
       
        function SlideShowImage(img, slideShow) {
            img.style.opacity = '0';
   
            this.fadeIn = function() {
                var i = 0;
                while (++i <= 40) {
                    window.setTimeout(function() {
                        img.style.opacity = parseFloat(img.style.opacity) + 0.025;
                    }, i * faddingSpeed);
                }
               
                window.setTimeout(function() {
                    slideShow.next();
                }, 40 * faddingSpeed + stopTime);
            }
   
            this.fadeOut = function() {
                var i = 0;
                while (++i <= 40) {
                    window.setTimeout(function() {
                        img.style.opacity = parseFloat(img.style.opacity) - 0.025;
                    }, i * faddingSpeed);
                }
            }
        }
    }
   
    var self = this;
    createSlides(slideel);
}

Avatar billede cosmo21 Novice
12. september 2010 - 19:28 #1
.
Avatar billede cosmo21 Novice
12. september 2010 - 19:29 #2
ok
Avatar billede passiflora Juniormester
12. september 2010 - 21:21 #3
... tror jeg skal have det uddybet en lille smule ....
Avatar billede csvendsen Nybegynder
13. september 2010 - 06:57 #4
Jeg fandt en js-fil til en hjemmeside, som jeg vedligeholder, hvor den preloader billeder.
Du kan nok selv tilrette nedenstående til dit brug.

// Array to Images
var photos = new Array();
var photoslider;
// Counter to Photo array
var which = 0;
//define images. You can have as many as you want:
photos[0] = "Images/Sponsor/Sponsor.jpg";
photos[1] = "Images/Sponsor/DjursKloakNy.jpg";
photos[2] = "Images/Sponsor/KoekkenlageretNy.jpg";
photos[3] = "Images/Sponsor/NYTbil.jpg";
photos[4] = "Images/Sponsor/AAlsrode.jpg";
photos[5] = "Images/Sponsor/lyngby-brugs.jpg";
photos[6] = "Images/Sponsor/Gaardbutikken.jpg";
photos[7] = "Images/Sponsor/ok02.jpg";
photos[8] = "Images/Sponsor/TG.jpg";
photos[9] = "Images/Sponsor/Roslev.jpg";

//---------------------------------------------------------------
//Preload Images
//Preload the images in the cache so that the images load faster
//create new instance of images in memory
var imagePreload = new Array();
for (var i = 0; i < photos.length; i++)
{
  imagePreload[i] = new Image();
  // set the src attribute
  imagePreload[i].src = photos[i];
}
Avatar billede passiflora Juniormester
15. september 2010 - 23:22 #5
... måske jeg kan finde ud af at indskrive preload i scriptet, men få det til at virke i explore kan jeg ikke ...
Avatar billede cosmo21 Novice
16. september 2010 - 21:41 #6
kan en smide svar her så jeg kan lukke og give point ;-))
Avatar billede passiflora Juniormester
16. september 2010 - 22:40 #7
øh ... hvad har mr. cosmo mon gang I ...
Avatar billede csvendsen Nybegynder
17. september 2010 - 07:15 #8
Jeg kan ikke svare på, hvorfor du ikke kan få det til at virke i IE. Hvis du vil lukke så tag selv point.
Avatar billede passiflora Juniormester
13. oktober 2010 - 13:23 #9
Jeg har fundet et andet script som klarede ærterne for mig.

Håber det ok at jeg uddeler point til mig selv.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester