webEdition - Forum

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.

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

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);

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 - Forum

Bilder dynamisch Nachladen

Bilder dynamisch Nachladen

Re: Bilder dynamisch Nachladen

Re: Bilder dynamisch Nachladen

Re: Bilder dynamisch Nachladen