Bilder dynamisch Nachladen

Fragen zu JavaScript.
Fragen zu we:Tags bitte im Forum webEdition Templates erstellen (we:Tags) posten.
Benutzeravatar
kay
Senior Member
Beiträge: 255
Registriert: Do 1. Jan 1970, 02:00
Wohnort: Bremen
Kontaktdaten:

Bilder dynamisch Nachladen

Beitragvon kay » Di 17. Jan 2017, 10:06

Moin Moin,

ich habe folgende Problemstellung und keine Idee wie ich das Lösen könnte.

Ich habe ein Bilderverzeichnis mit Unterordnern in denen sich hunderte Bilder befinden.

Diese Bilder möchte ich zufällig, in einer Diashow, auf einem fest installierten Monitor im Foyer eines Sportvereins zeigen.
Mein Ansatz ist folgender (leider unschön da die Bilder sich erst mehr oder weniger langsam auf derm Bildschirm laden.)

Ich erstelle eine php-seite zum automatischen nachladen:

Code: Alles auswählen

<we:listview name="ImageGallery" contenttypes="img" rows="1" searchable="false" order="random()"  workspaceID="182">
      <we:repeat>
         <div class="panel">
            <we:field type="img" name="foto" thumbnail="1200" />
         </div>
      </we:repeat>
   </we:listview>


und die Hauptseite mit folgendem Code

Code: Alles auswählen

<script>
      function dia (){ 
         $("#bilder").load("monitor-bilder.php");
         } 
      setInterval(dia, 8000);
</script>

<div id="bilder"></div>


Meine Frage ist, wie bekomme ich es hin, dass er das nächste Bild schon im Hintergrund läd, um einen soften Übergang hin zu bekommen.
Liebe Grüße
Kay-Rafael Stemmer
http://leitbild.biz

WBTMagnum
webEdition Partner
webEdition Partner
Beiträge: 1319
Registriert: Di 7. Mär 2006, 16:50
Kontaktdaten:

Re: Bilder dynamisch Nachladen

Beitragvon WBTMagnum » Di 17. Jan 2017, 11:23

Hallo Kay,

Du brauchst einen preloader für deine Slideshow.

Ich würde allerdings direkt die Bilddatei übergeben. Oder du übergibst gleich mehrere Bildpfade und arbeitest die per JS ab.


HTH,
Sascha

Benutzeravatar
kay
Senior Member
Beiträge: 255
Registriert: Do 1. Jan 1970, 02:00
Wohnort: Bremen
Kontaktdaten:

Re: Bilder dynamisch Nachladen

Beitragvon kay » Mi 18. Jan 2017, 11:47

Nicht optimal aber schon besser

Code: Alles auswählen

function dia (){
               $.ajax({
                  type: 'get',
                  url: '/monitor-bilder.php',
                  success: function(response){
                     $('#bilder').fadeOut(function(){
                        $('#bilder').html('');
                        $('#bilder').html(response); must be parsed in the DOM correctly first
                        $('#bilder').hide().fadeIn(3000);
                     });
                  }
               });
            }
setInterval(dia, 12000);
Liebe Grüße
Kay-Rafael Stemmer
http://leitbild.biz

mokraemer
Senior Member
Beiträge: 2366
Registriert: So 8. Aug 2010, 01:23
Wohnort: Mainz

Re: Bilder dynamisch Nachladen

Beitragvon mokraemer » Do 19. Jan 2017, 12:57

so kompliziert muß man das gar nicht machen. V.a. nutzt du so nicht den Browser Cache und er muß das immer wieder laden (Ajax).

Besser ist es ein img-Tag zu nehmen das man per CSS "versteckt" (display:none mag FF nicht, aber visibility:hidden ging afaik, sonst halt der alte left:999em Trick). Wenn du dem Element den nächsten Pfad zuweist, dann lädt der Browser das Bild vor. Dazu muß dann deine Dia-Funktion eigentlich immer nur die URL des neuen Bildes von dem versteckten Element zuweisen und das nächste Bild da reinstecken - eigentlich sehr einfach zu bauen.
webEdition-Kern-Entwickler


Zurück zu „JavaScript“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast