[JS] Lightbox foto's preloaden

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_53766335
Is het dmv JavaScript mogelijk om eerste 'alle' images te preloaden en een plaatje te laten zien? Het probleem op http://hoogberijk.nl/index.php?p=media is namelijk, dat als niet alle foto's er meteen staan de lightbox ook nog niet werkt. Of is er een andere manier om dit op te lossen?
pi_53766655
Misschien heb je hier wat aan, maar mijn ervaringen zeggen dat deze manier niet altijd helpt maar zeker het proberen waard is..
  zondag 7 oktober 2007 @ 16:05:34 #3
42555 Tomek
Take on the world!
pi_53766732
je moet die foto;s ook resizen, dan laden ze veel sneller...
dit is en lelijk en traag
pi_53766944
Afbeeldingen preloaden kun je doen met het volgende JavaScript:

1
2		preload_image = new Image(25,25);
preload_image.src = "http://www.fok.nl/afbeelding.jpg";


Herhaal dat stukje voor alle afbeeldingen en ze worden bij het openen van de pagina allemaal door de browser ingeladen. Als je dan de lightbox gebruikt, kan de browser de afbeeldingen vanuit de cache tonen.
pi_53767034
quote:
Op zondag 7 oktober 2007 16:05 schreef Tomek het volgende:
je moet die foto;s ook resizen, dan laden ze veel sneller...
dit is en lelijk en traag


Dus je wilt zeggen dat ik ze eerst met php moet resizen? Want een aparte map met thumbnails is kut.
pi_53767195
quote:
Op zondag 7 oktober 2007 16:14 schreef BladiN87 het volgende:

[..]

Dus je wilt zeggen dat ik ze eerst met php moet resizen? Want een aparte map met thumbnails is kut.
Ja, daarvoor zou je phpThumb() kunnen gebruiken. Die kun je automatisch thumbnails laten maken van je afbeeldingen. Ze worden ook automatisch gecached, dus het is geen zware belasting voor je server.
pi_53767805
quote:
Op zondag 7 oktober 2007 16:18 schreef HuHu het volgende:

[..]

Ja, daarvoor zou je phpThumb() kunnen gebruiken. Die kun je automatisch thumbnails laten maken van je afbeeldingen. Ze worden ook automatisch gecached, dus het is geen zware belasting voor je server.


Bedankt, nog nooit van gehoord, werkt inderdaad handig en sneller.
Nu zit ik alleen nog met het probleem dat plaatjes niet in 0.1 sec ingeladen zijn. Wat ik dus eigenlijk wil doen is een laadtekentje weergeven, zoals http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/5-0.gif en pas als alle foto's ingeladen zijn dat hij ze laat zien.
  zondag 7 oktober 2007 @ 16:58:23 #8
5637 koekiemonster
Goede reaktie ------------>
pi_53768382
divje over je images plaatsen en deze na 4 seconden weghalen [divje.style.display="none"]... In dat divje toon een mooie image met loading oid.
zeer simpele oplossing die voor 99,99 voldoet.
koekje erbij?
pi_53768526
JavaScript geeft zelfs een event af als een afbeelding geladen is. Je kunt dus standaard een div tonen met het laden-icoontje. Zodra de bijbehorende Image een load-event geeft kun je het laden-icoontje vervangen met de zojuist geladen afbeelding.
pi_53768729
quote:
Op zondag 7 oktober 2007 17:04 schreef HuHu het volgende:
JavaScript geeft zelfs een event af als een afbeelding geladen is. Je kunt dus standaard een div tonen met het laden-icoontje. Zodra de bijbehorende Image een load-event geeft kun je het laden-icoontje vervangen met de zojuist geladen afbeelding.


Het probleem is dat ik het niet per foto wil maar als heel de lijst geladen is. Die oplossing van 4 seconden is niet altijd accuraat omdat het niet altijd evenveel foto's zijn.
  zondag 7 oktober 2007 @ 17:16:08 #11
5637 koekiemonster
Goede reaktie ------------>
pi_53768762
true, je kan een dergelijke opzet gebruiken:

function waitFor(img){
if(!img.complete){
//toon loading icon en reload functie
imgWait=setTimeout('waitFor(img)', 250);
}
else{
// toon image
}
}
koekje erbij?
pi_53768807
quote:
Op zondag 7 oktober 2007 17:16 schreef koekiemonster het volgende:
true, je kan een dergelijke opzet gebruiken:

function waitFor(img){
if(!img.complete){
//toon loading icon en reload functie
imgWait=setTimeout('waitFor(img)', 250);
}
else{
// toon image
}
}


Ja, oke, bedankt. Maar dat is dus voor één image en niet 144 in dit geval.
pi_53768838
quote:
Op zondag 7 oktober 2007 17:14 schreef BladiN87 het volgende:

[..]

Het probleem is dat ik het niet per foto wil maar als heel de lijst geladen is. Die oplossing van 4 seconden is niet altijd accuraat omdat het niet altijd evenveel foto's zijn.
Je kunt een zelfgemaakte functie koppelen aan het load-event van een afbeelding. Als je dan steeds dezelfde functie koppelt aan het load-event van alle afbeeldingen, dan kun je gewoon een teller bijhouden en pas aan het einde alles ineens tonen.

Met de error- en abort-events kun je fouten afvangen tijdens het laden, zodat niet 1 foute afbeelding de hele lijst blokkeert.
pi_53768979
quote:
Op zondag 7 oktober 2007 17:19 schreef HuHu het volgende:

[..]

Je kunt een zelfgemaakte functie koppelen aan het load-event van een afbeelding. Als je dan steeds dezelfde functie koppelt aan het load-event van alle afbeeldingen, dan kun je gewoon een teller bijhouden en pas aan het einde alles ineens tonen.

Met de error- en abort-events kun je fouten afvangen tijdens het laden, zodat niet 1 foute afbeelding de hele lijst blokkeert.


Je kunt me wel vertellen dat ik het met load-event moet doen en dergelijke, maar van javascripot ken ik slechts basic dingen als document.write and getelementbyid etc. Dus ik weet niet of er gepaste tutorials zijn om dit te doen, maar dat zou wel handig zijn.
pi_53780661
Het is ondertussen gelukt met het volgende stukje, bedankt allemaal (als het beter kan laat het me maar weten)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71		<?php
                if($handle = opendir("media/".$albums[$_GET['a']])) { // Open the directory
                        while(false !== ($file = readdir($handle))) {
                                if($file != "." && $file != "..") {
                                        $pics[] = $file;
                                }
                        }
                }
                closedir($handle);

                $count = count($pics);
                
        if(IsSet($_GET['p']) && $_GET['p'] == "media") {
               
        <script>
            var counter = 0;
        
                    function loadImages(img) {
                        
                        if(!img.complete) {
                            counter++
                            document.getElementById('totaal').value = counter;
                        }
                        if(counter ==  print($count); ) {
                            document.getElementById('laden').className = "hidden";
                            document.getElementById('foto').className = "fotos";    
                        }
                    }
                </script>
                
<div id="laden" class="fotosloading">
    <br />
    Bezig met laden..
    <br /><br />
    <img src="images/laden.gif" alt="" />
    <br /><br />
    <input value="0" id="totaal" /> /  print($count); 
</div>
<div id="foto" class="hidden">                 

        }

              if(!empty($count)) {
                sort($pics);

                $maxwidth = 120;
                $maxheight = 90;

                foreach($pics as $key => $pic) {

                  $size = getimagesize('media/'.$albums[$_GET['a']].'/'.$pic);

                  if($size['mime'] == 'image/jpeg' || $size['mime'] == 'image/gif' || $size['mime'] == 'image/png') {
                    $factorwidth = $size[0] / $maxwidth;
                    $factorheight = $size[1] / $maxheight;

                    $width = round($size[0] / $factorwidth);
                    $height = round($size[1] / $factorheight);

                                        $img = 'phpThumb/phpThumb.php/'.$width.'x'.$height.';../media/'.$albums[$_GET['a']].'/'.$pic;

                    echo '<a href="/media/'.$albums[$_GET['a']].'/'.$pics[$key].'" rel="lightbox['.$_GET['a'].']"><img id="img', $key ,'" src="', $img ,'" onload="javascript:loadImages(\'img', $key ,'\',\'', $img ,'\')" alt="" /></a>
                    ';
                  }
                }
              } else
                  echo '<br />
                        <div class="mediabold">Er staan nog geen foto\'s in deze map.</div>';

  }
?>
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[JS] Lightbox foto's preloaden
Index

» digital corner

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')