Søg
Avatar billede prom Nybegynder
24. juli 2004 - 20:17 Der er 12 kommentarer og
1 løsning

Problemer med ventetiden i slideshow

Jeg er ved og lave et slideshow hvor hvert nye billede loades automatisk efter f.eks. 5 sec (var slideshowInterval).

Slideshowet startes ved et kald til slideshow() og stoppes også ved kald til slideshow().

Mit problem er at der ikke tages højde for den tid det tager at downloade hvert nyt billede.
Hvordan kan jeg fortælle browseren at den skal hente et nyt billede, vente 5 sec når hele billedet er hentet, og så hente næste billede?



var slideShowIsRunning = false;
var slideshowInterval = 5*1000;
var timer;

function slideshow()
{
  if(slideShowIsRunning)
  {
    clearTimeout(timer);
    slideShowIsRunning = false;
  }
  else
  {
    slideShowIsRunning = true;
    startTimer();
  }
}
function nextMainFoto()
{
  if(imageIndex == scrollImages.length-1)
    imageIndex = 0;
  else
    imageIndex++;
  document.mainFoto.src = scrollImages[imageIndex];
}
function startTimer()
{
  nextMainFoto();
  timer = setTimeout("startTimer();", slideshowInterval);
}
Avatar billede tdimhcs Nybegynder
24. juli 2004 - 21:10 #1
Hvorfor preloader du ikke de images der skal bruges i din funktion?


/kurt
Avatar billede prom Nybegynder
24. juli 2004 - 21:19 #2
Der er ganske mange billeder, mellem 1 og 2 MB af 20 til 50 KB. Min erfaring er at hvis jeg preloader så mange billeder vil siden være låst ganske længe hvis brugeren sider med en modemforbindelse.

- prom
Avatar billede simonfreiesleben Nybegynder
25. juli 2004 - 01:30 #3
var slideShowIsRunning = false;
var slideshowInterval = 5*1000;
var timer;

function slideshow()
{
  if(slideShowIsRunning)
  {
    clearTimeout(timer);
    slideShowIsRunning = false;
  }
  else
  {
    slideShowIsRunning = true;
    startTimer();
  }
}
function nextMainFoto()
{
  if(imageIndex == scrollImages.length-1)
    imageIndex = 0;
  else
    imageIndex++;
  document.mainFoto.src = scrollImages[imageIndex];
}

ÆNDRER STRARTTIMER-FUNKTIONEN:

function startTimer()
{
  timer = setTimeout("nextMainFoto();", slideshowInterval);
}

OG TILFØJER EVENTHANDLER I BILLEDET

<img id="mainFoto" onload="startTimer();">


Kan det ikke gøre det?
Avatar billede prom Nybegynder
25. juli 2004 - 02:45 #4
Hvis jeg tilføjer onload="startTimer();" starter slideshowet med det samme siden loades og det er jo ikke meningen. Jeg tror desværre ikke at det er løsningen :)

Det fik faktisk Mozilla Firefox til at gå ned :(

- prom
Avatar billede roenving Novice
25. juli 2004 - 07:29 #5
En modificeret udgave af et slideshow ?-)

http://www.eksperten.dk/spm/478961
Avatar billede prom Nybegynder
25. juli 2004 - 12:04 #6
Jeg tror at dit slideshow har samme problem Roenving:
function rotateimage(){
  var im = document.getElementById('canvas');
  curimageindex = ++curimageindex%slidelength;
  im.src = fadeimages[index[curimageindex]];
}
if (ie||moz)
  window.onload=initSlide;
else
  setInterval("rotateimage()",pause);

-------------------------------------------------------

Jeg har selv fundet en løsning der virker fint i Mozilla men nogen gange giver stack overflow i IE.
Nogen der kan se hvor det sker? Her kommer koden:

HTML-fil

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Bildearkiv - Det lille hus - Programmerer &amp; Webutvikler - Morten Prom</title>
<link rel="stylesheet" type="text/css" href="../include/mortenprom.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="false">
<meta name="description" content="Morten Prom - Programmerer &amp; Webutvikler">
<meta name="keywords" content="Programmerer, Webutvikler">
<script language="JavaScript" type="text/javascript" src="../include/cursor.js"></script>
<script language="JavaScript" type="text/javascript" src="../include/imageNavigation.js"></script>
<script type="text/javascript" language="javascript">
var scrollImageURL = "images/lille-hus/";
var scrollImageThumbURL = "images/lille-hus/thumb/";
var scrollImages = new Array(
'DSC01065.jpg',
'DSC00959.jpg',
'DSC00962.jpg',
'DSC01007.jpg',
'DSC01008.jpg',
'DSC01010.jpg',
'DSC01014.jpg',
'DSC01019.jpg',
'DSC01041.jpg',
'DSC01053.jpg',
'DSC01068.jpg',
'DSC01078.jpg',
'DSC01083.jpg',
'DSC01091.jpg',
'DSC01095.jpg',
'DSC01114.jpg',
'DSC01115.jpg',
'DSC01138.jpg',
'DSC01265.jpg',
'DSC01302.jpg',
'DSC01315.jpg',
'DSC01323.jpg',
'DSC01334.jpg',
'DSC01348.jpg',
'DSC01352.jpg',
'DSC01359.jpg',
'DSC01410.jpg'
);

</script>
<script language="JavaScript" type="text/javascript" src="../include/vertical-scroll.js"></script>
</head>
<body background="../images/generelt/bakgrunn.gif">
<div id="verticalScroller">
  <div id="scrollContainer1">
    <div class="clContent" id="scrollContent1">
      <script language="JavaScript" type="text/javascript">
        for(i=0; i<scrollImages.length; i++)
        {
          document.write("<img class='bildeArkivThumb' src='" + scrollImageThumbURL + scrollImages[i] + "'");
          document.write("onclick='document.mainFoto.src=\"" + scrollImageThumbURL + scrollImages[i] + "\";")
          document.write("document.mainFoto.src=\"" + scrollImageURL + scrollImages[i] + "\";");
          document.write("setImageIndex(" + i + ");'");
          document.write("alt='Klikk for st&oslash;rre bilde' onmouseover='java script:setCursorToPointer(this);'>");
        }
      </script>
    </div>
  </div>
  <div id="scrollUp1" onmouseover="java script:setCursorToPointer(this);"><img src="../images/generelt/scroll-up.gif" alt="Klikk for &aring; scrolle op"></div>
  <div id="scrollDown1" onmouseover="java script:setCursorToPointer(this);"><img src="../images/generelt/scroll-down.gif" alt="Klikk for &aring; scrolle ned"></div>
  <div id="scrollTrack1">
    <div id="scrollBar1" onmouseover="java script:setCursorToPointer(this);"></div>
  </div>
</div>

<div id="bildearkivFoto"><img onload="loadingImage();" style="width:416px;" src="images/lille-hus/thumb/DSC01065.jpg" name="mainFoto" alt="Bildearkiv - Det lille hus - Programmerer &amp; Webutvikler - Morten Prom">
</div>
<div id="mainImageNavigator">
  <img onClick="previusMainFoto();" onmouseover="java script:setCursorToPointer(this);" src="../images/generelt/previus.gif" alt="Forrige bilde">&nbsp;&nbsp;
  <img onClick="nextMainFoto();" onmouseover="java script:setCursorToPointer(this);" src="../images/generelt/next.gif" alt="Neste bilde">
</div>

<div id="slideshow" onClick="slideshow();" onmouseover="java script:setCursorToPointer(this);">
  Slideshow
</div>

<div id="logo"><a href="http://www.mortenprom.com/"><img src="../images/generelt/logo.gif" alt="Programmerer &amp; Webutvikler - Morten Prom"></a></div>
<div id="navigationBar"></div>
<div id="navigation"> <a href="../">Home</a> <img class="navigationNext" src="../images/generelt/navigation-next.gif" alt="Neste navigationsniveau - Programmerer &amp; Webutvikler - Morten Prom">
  <a href="index.html">Bildearkiv</a> <img class="navigationNext" src="../images/generelt/navigation-next.gif" alt="Neste navigationsniveau - Programmerer &amp; Webutvikler - Morten Prom">
  Lille hus p&aring; landet </div>
<div id="menu"> <a class="menuLink" href="#">Lille hus p&aring; landet</a><br>
  <a class="menuLink" href="privat/">Privat</a><br>
</div>
<script type="text/javascript" language="javascript">
  document.mainFoto.src = scrollImageURL + scrollImages[0];
</script>
</body>
</html>

-------------------------------------------------------
Filen: imageNavigation.js

var imageIndex = 0;
function setImageIndex(index)
{
  imageIndex = index;
}
function nextMainFoto()
{
  if(imageIndex == scrollImages.length-1)
    imageIndex = 0;
  else
    imageIndex++;
  document.mainFoto.src = scrollImageThumbURL + scrollImages[imageIndex];
  document.mainFoto.src = scrollImageURL + scrollImages[imageIndex];
}
function previusMainFoto()
{
  if(imageIndex == 0)
    imageIndex = scrollImages.length-1;
  else
    imageIndex--;
  document.mainFoto.src = scrollImageThumbURL + scrollImages[imageIndex];
  document.mainFoto.src = scrollImageURL + scrollImages[imageIndex];
}

var slideShowIsRunning = false;
var slideshowInterval = 5*1000;
var timer;
var progressTimer;
var stopTextTimer;
var thumbIsLoaded;
var stopTextBoolean = true;
function slideshow()
{
  if(slideShowIsRunning)
  {
    clearTimeout(timer);
    clearBlink();
    slideShowIsRunning = false;
    document.getElementById("slideshow").innerHTML = "Slideshow";
  }
  else
  {
    slideShowIsRunning = true;
    document.getElementById("slideshow").innerHTML = "Stop Slideshow";
    blinkStopText(); 
    nextSlideThumb()
  }
}
function nextSlideImage()
{
  document.mainFoto.src = scrollImageURL + scrollImages[imageIndex];
}
function nextSlideThumb()
{
  if(imageIndex == scrollImages.length-1)
    imageIndex = 0;
  else
    imageIndex++;
  thumbIsLoaded = true;
  document.mainFoto.src = scrollImageThumbURL + scrollImages[imageIndex];
}
function loadingImage()
{
  if(slideShowIsRunning)
  {
    if(thumbIsLoaded)
    {
      nextSlideImage();
      thumbIsLoaded = false;
    }
    else
    {
      timer = setTimeout("nextSlideThumb();", slideshowInterval);
      thumbIsLoaded = true;
    }
  }
}
function blinkStopText()
{
  if(stopTextBoolean)
  {
    document.getElementById("slideshow").style.color = "#FAA633";
    stopTextBoolean = false;
  }
  else
  {
    document.getElementById("slideshow").style.color = "#1068B3";
    stopTextBoolean = true;
  }
  stopTextTimer = setTimeout("blinkStopText();", 800);
}
function clearBlink()
{
  clearTimeout(stopTextTimer);
  document.getElementById("slideshow").style.color = "#1068B3";
}

- prom
Avatar billede prom Nybegynder
25. juli 2004 - 12:05 #7
Det hele kan ses her:
http://www.mortenprom.com/bildearkiv/lille-hus.html

- prom
Avatar billede roenving Novice
25. juli 2004 - 12:12 #8
Nej, den har jeg ikke lige gennemskuet, men jeg kunne se en anden tåbelighed:

onmouseover='java script:setCursorToPointer(this);'

-- for det første er det noget vrøvl at fortælle en javascript-event at den skal bruge pseudo-fil-protokollen java script:

-- for det andet vil det være adskilligt nemmere at gøre sådan:

style="cursor:pointer;cursor:hand;"

-- da en cursor alligevel kun virker onmouseover !-)
Avatar billede simonfreiesleben Nybegynder
25. juli 2004 - 22:35 #9
Hey Prom.
Mener du hvad du siger med at det bliver startet så snart siden læses? onLoad event-handleren i en <img>-kode refererer vel til når billedet er indlæst!?

Og en anden lille ting. Det slideshow du linker til er der fejl i. "Stack overflow at line:0"
Avatar billede prom Nybegynder
26. juli 2004 - 11:06 #10
Jeg tror at onLoad event-handleren er det jeg var på jagt efter, min løsning fra 25/07-2004 12:04:54 skal dog modificeres noget da der som simonfreiesleben
jo også har opdaget af en eller anden grund kommer stack overflow i IE.
Er der nogen der har en forklaring på hvorfor stack overflow opstår i IE? En generel forklaring på IE's stack overflow problemer kunne jeg også godt bruge!

- prom
Avatar billede wired Nybegynder
27. juli 2004 - 12:14 #11
Tilføj evt. følgende til den funktion som onload kalder:

window.event.cancelBubble = true;
Avatar billede prom Nybegynder
27. juli 2004 - 21:03 #12
Jeg kan ikke se at window.event.cancelBubble = true; har nogen indvirkning på stack overflow problemet. Men jeg byttede lidt rundt på kodelinierne i loadingImage(), så den i stedet for at således ud:

function loadingImage()
{
  if(slideShowIsRunning)
  {
    if(thumbIsLoaded)
    {
      nextSlideImage();
      thumbIsLoaded = false;
    }
    else
    {
      timer = setTimeout("nextSlideThumb();", slideshowInterval);
      thumbIsLoaded = true;
    }
  }
}

kom til at se sålesdes ud:

function loadingImage()
{
  if(slideShowIsRunning)
  {
    if(thumbIsLoaded)
    {
      thumbIsLoaded = false;
      nextSlideImage();
    }
    else
    {
      thumbIsLoaded = true;
      timer = setTimeout("nextSlideThumb();", slideshowInterval);
    }
  }
}

Og det ser ud til at virke ?-)
Jeg giver derfor pointene til simonfreiesleben da det var ham der kom med ideen om onLoad event-handleren.

Så har jeg selvfølgelig fjernet den tåbelighed som roenving påpeger :)

- prom
Avatar billede prom Nybegynder
27. juli 2004 - 21:05 #13
Er der nogen der får fejlmeddelser efter den lille rettelse i loadingImage()?

- prom.
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
22 min siden Samsung Galaxy vil ikke ud af "Sikker tilstand" Af ErikHg i Mobiltelefoner
I går 12:15 morf bilede Af knuldefar1942 i Fri debat
07/0822:13 Gemme største værdi Af Lemming@privat.dk i Excel
07/0821:39 Kvindelig journalist ved DR - hvad er hendes navn. Af ErikHg i Fri debat
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
White papers
Flere white papers »