Preloadingscreen ... wartet nicht bis alle Bilder geladen sind

[kaethe]

Hi Leute,

ich habe diese Seite gebaut:

www.ds-visuals.de

Und da der Kunder seeeeehr viele Bilder im Portfolio zeigen möchte lädt die Seite entspechend lang bis sich das Portfolio zurechtrückt. Jetzt habe ich hiermit: https://ihatetomatoes.net/create-cus...oading-screen/ den Screen eingebaut und hiermit https://github.com/desandro/imagesloaded (zumindest dachte ich das) versuche ich den Preloader solange laufen zu lassen bis alle Bilder geladen sind. Nur leider funktioniert das nicht so wie ich das möchte. Momentan hab ich eine Zeit eingegeben bis sich er Vorhang öffnen, aber das ist ja nicht im Sinne des Erfinders. Ich vermute, daß das die beiden Scripte noch nicht miteinander sprechen. Ich weiss nur einfach nicht wieso...

Hat jemand einen Tipp?

Danke und schönes Wochenende

[joe]

Auf deiner Seite wird ein Javascript Fehler geschmissen den du zuerst mal beheben solltest:

Uncaught ReferenceError: $ is not defined Zeile 15 in der main.js

Lass dir doch sonst mal mit der Progress Methode jedes einzelne Bild ausgeben und schau ob da wirklich alles mitkommt:

.progress( function( instance, image ) {
var result = image.isLoaded ? 'loaded' : 'broken';
console.log( 'image is ' + result + ' for ' + image.img.src );
});

[Supermann]

Hallo,

also ich hatte das Problem auch in unserer Galerie, allerding ist ein Preloader eine denkbar schlechte IDEE wenn es tatsächlich sehr lange dauert. Sieh es mal Deiner sicht, Du kommst auf eine Seite und da rödelt dann eine ganze weile dieser Preloader! Ich würde abbrechen. Normalerweise sollte die Seite wenn diese zum Beispiel vom Server gecached wird, sehr schnell sichtbar sein, auch bei vielen Bildern. Das einzige was man machen muss ist im Frontend die Seite einmal selber aufrufen, damit diese dann in den Servercache wandert und der nächste davon profitiert. Ansonnsten einfach die Bilder nachladen lassen wenn man scrollt, das wird eigentlich bei fast allen Seiten die sich mit großen Bildermassen befassen so praktiziert.

Aber bitte keinen Preloader.... denn etwas was sich über längere Zeit dreht, heisst meistens nichts gutes.

[kaethe]

Danke für die Antwort, ich hab dein Snippet im Seitelayout als zusätzlichen headtag eingebaut ... da passiert aber garnix

[kaethe]

Danke supermann, ich sehe das ähnlich. Ich habe auch schon versucht dem Kunden die vielen Bilder auszureden.
Wie kann ich denn die Bilder nachladen lassen?

[kaethe]

Danke supermann, ich sehe das ähnlich. Ich habe auch schon versucht dem Kunden die vielen Bilder auszureden. Im moment sieht es halt wie ein Fehler aus, weil die Bilder alle links rumhängen ...

Wie kann ich denn die Bilder nachladen lassen?

[tab]

Ich habe mir das nicht im Detail angeschaut, weiss also nicht, welche Galerie du da benutzt. Vielleicht hängt es ja da dran. Jedenfalls
sieht das bei den Vorschaubildern meist in etwa so aus.

1.250px × 833px (Skaliert zu 386px × 257px)

Das heißt, es werden bereits beim Seitenaufbau wohl alle Bilder in kompletter Größe geladen, um dann auf circa 10% der ursprünglichen Pixelzahl runterskaliert zu werden für die Darstellung. Kannst du nicht für diese Thumbnails (auch wenn es etwas größere Daumennägel sind) auch kleinere Bilder verwenden? Da sparst du dir doch bestimmt 90% oder mehr der zu ladenden Datenmenge für den Seitenaufbau. Jedenfalls habe ich Google Pagespeed selten so extrem ko**en sehen. Mobil: 0/100, Desktop: 0/100. Und das Hauptärgernis waren eben die viel zu großen Bilder, für das, was dann damit nur dargestellt wird. Komprimierung könnte bei dem ganzen Javascript natürlich auch nicht schaden, aber das sind ja vergleichsweise nur Peanuts.

[lucina]

Wie kann ich denn die Bilder nachladen lassen?

Wenn Du sowieso schon mit den Plugins von David DeSandro arbeitest, dann könntest Du das ggf. so lösen: http://isotope.metafizzy.co/v1/demos...te-scroll.html

[kaethe]

Danke dir, ich versuche das mal!

[kaethe]

I

Das heißt, es werden bereits beim Seitenaufbau wohl alle Bilder in kompletter Größe geladen, um dann auf circa 10% der ursprünglichen Pixelzahl runterskaliert zu werden für die Darstellung. Kannst du nicht für diese Thumbnails (auch wenn es etwas größere Daumennägel sind) auch kleinere Bilder verwenden? Da sparst du dir doch bestimmt 90% oder mehr der zu ladenden Datenmenge für den Seitenaufbau. Jedenfalls habe ich Google Pagespeed selten so extrem ko**en sehen.

Ja, das Problem ist hier, dass die Bilder ja in der lightbox groß gezeigt werden sollen, ich kann zwar thumbnails in kleinem Format einfügen, aber dann wird dieses eben auch in der Lightbox verwendet ...

Grundlage für das Portfolio ist das NAchrichtenmodul mit dem Template Oner.

[tab]

Das meinte ich mit damit, dass es vielleicht an der verwendeten Galerie hängt. Bei der Contao-Galerie werden z.B. die Thumbnails aus dem Original schon auf dem Server runtergerechnet, was allerdings auch noch nicht optimal ist. Für die Lightbox wird dann aber das Originalbild verwendet. Eventuell wäre hier eine Galerie besser, bei der man sowohl Thumbnails als auch das in der Lightbox anzuzeigende Bild selbst vorgeben kann. Hier kommt ja auch noch hinzu, dass wegen Onepage auch noch alle Kategorien gleich am Amfang geladen werden. Da wäre es wohl wirklich besser, diese zu Beginn gar nicht angezeigten Bilder erst bei Bedarf nachladen zu lassen. Das spart dann beim Laden der Seite bestimmt die Hälfte ein. Dann noch Javascript eventuell komprimiert ausliefern, ist ja auch eine ganze Menge.

[kaethe]

ok, ja. Nur weiss ich nicht wie ich das Porfolio genauso mit einer Galerie umgebaut kriege.

Und wegen des Infinite Scrolls: Macht das überhaupt Sinn wenn ich unterhalb des Portfolios noch Content habe? Und wie verhält sich dann meine OnePage Navigation?

[Spooky]

Du musst nichts umbauen. Dein Portfolio ist einfach ein Newslist Modul. Im Newslist Modul kannst du eine Bildgröße einstellen. Derzeit ist dort keine Bildgröße eingestellt, daher werden die Original Bilder in voller Auflösung ausgegeben. Idealerweise solltest du dir hier ein Responsive Image Setting erzeugen, wo du bei verschiedenen Breakpoints kleinere Bilder anzeigen lässt, damit je nach Auflösung wirklich nur das passende Bild gewählt wird.

[kaethe]

hm, wo genau kann ich hier die Bildgröße einstellen? Ich finde die Möglichkeit weder im Modul, noch im Template?

[Spooky]

Mach mal einen Screenshot von diesem Newslist Modul.

[kaethe]

aaah, ich hab's gefunden

[kaethe]

ok, damit gebe ich dann aber die Größe für die Thumbnails und die Größe in der Lightbox an. Wenn ich aber nur die thumbs klein haben will? In der Lightbox sollen die Bilder ja groß gezeigt werden ... der Photograph legt natürlich wert auf hohe Auflösung.

[Spooky]

Nein, dort gibst du nur die Größe für die Thumbnails an. Wie kommst du darauf, dass man dort auch die Größe für das Bild in der Lightbox angeben kann?

[kaethe]

weil wenn ich dort eine Größe eingebe auch das Bild in der Lightbox kleiner wird:

www.davidschultheiss.de

Ich habe dort 800px Breite eingegeben ... Ohne diese Angabe ist das Bild in der Lightbox fast fullsize ...

[Spooky]

weil wenn ich dort eine Größe eingebe auch das Bild in der Lightbox kleiner wird:

www.davidschultheiss.de

Ich habe dort 800px Breite eingegeben ... Ohne diese Angabe ist das Bild in der Lightbox fast fullsize ...

Dann ist das verwendete News Template falsch geschrieben - dort wird anscheinend für den Link das Thumbnail Bild ausgegeben, statt das Originalbild. Poste mal folgende Informationen:

• Einen Screenshot von deinen Moduleinstellungen
• Das verwendete Newstemplate
• Die verwendete Contao Version

[kaethe]

Ok. Ich verwende Contao 3.5.0

Das Template hat folgenden Code:

<div class="item block<?php echo $this->class; ?> port_overlay filter_<?php echo standardize($this->subHeadline); ?>">
	<a href="<?php echo $this->src; ?>" data-lightbox="portfolio" class="more">
	<figure class="image_container">
		<div class="image_container_img"><img src="<?php echo $this->src; ?>" <?php echo $col->imgSize; ?> alt="<?php echo $this->alt; ?>"></div>
		<div class="content">
			<div class="info">
			<h5 class="title"><?php echo $this->newsHeadline; ?></h5>
			<div class="subline"><?php echo $this->subHeadline; ?></div>
		</div>
		</div>
	</figure>
	</a>
</div>

Und im Anhang der Screenshot.

Danke!

[Spooky]

Ja, das Template ist falsch. Du musst

<a href="<?php echo $this->src; ?>" data-lightbox="portfolio" class="more">

mit

<a href="<?php echo $this->singleSRC; ?>" data-lightbox="portfolio" class="more">

ersetzen. Außerdem würde ich empfehlen folgendes:

<div class="image_container_img"><img src="<?php echo $this->src; ?>" <?php echo $col->imgSize; ?> alt="<?php echo $this->alt; ?>"></div>

mit

<div class="image_container_img"><?php $this->insert('picture_default', $this->picture); ?></div>

zu ersetzen, falls du hier mal Responsive Image Einstellungen verwenden möchtest.

[kaethe]

Bestens! Vielen Dank!

Ich fürchte aber, ich muss mir dennoch noch was anderes einfallen lassen ...

[kaethe]

Ach, noch eine frage:

Ich habe im Newsmodul bei den einzelnen News sowohl ein Bild als Newspost-Element eingefügt als auch bei den Grundeinstellungen zum Newspost da ich die für Thumbnail und Hauptbild gehalten habe. Nun ist es ja aber so, dass nur das Hauptbild verwendet wird. Sollte ich die Bild-Elemente im Newspost rausnehmen, werden die trotzdem geladen und verringern somit auch die Geschwindigkeit?

[Spooky]

Ich fürchte aber, ich muss mir dennoch noch was anderes einfallen lassen ...

In wie fern?

Ich habe im Newsmodul bei den einzelnen News sowohl ein Bild als Newspost-Element eingefügt als auch bei den Grundeinstellungen zum Newspost da ich die für Thumbnail und Hauptbild gehalten habe. Nun ist es ja aber so, dass nur das Hauptbild verwendet wird.

Das Teaser Bild wird in der Newsliste angezeigt. Habe jetzt nicht ganz verstanden was du mit Hauptbild meinst.

Sollte ich die Bild-Elemente im Newspost rausnehmen, werden die trotzdem geladen und verringern somit auch die Geschwindigkeit?

Geschwindigkeit in welcher Hinsicht?

[kaethe]

In wie fern?

Weil es immer noch zu viele Bilder sind die geladen werden müssen, und es insgesamt zu lange dauert bis die Seite geschmeidig dargestellt wird. Ich versuche nochmal das Infinite Scroll einzubauen-

Das Teaser Bild wird in der Newsliste angezeigt. Habe jetzt nicht ganz verstanden was du mit Hauptbild meinst.

Na wie in den Screenshots ... Es gibt ein Bild als Nachrichtenelement quasi, und dann gibt es in der Einstellung für die jeweilige Nachricht noch eins. Ich nehme das eine einfach raus. fertig
Ich bin noch zu neu bei Contao um das verständlich zu erklären wahrscheinlich ...

Geschwindigkeit in welcher Hinsicht?

Die Seite braucht ob der ganzen Bilder eine halbe Ewigkeit bis alles da ist. Ich dachte halt, wenn ich noch weitere Elemente in den Nachrichten habe dass das dann noch länger dauert mit der Ladezeit.

[Spooky]

Na wie in den Screenshots ... Es gibt ein Bild als Nachrichtenelement quasi, und dann gibt es in der Einstellung für die jeweilige Nachricht noch eins. Ich nehme das eine einfach raus. fertig
Ich bin noch zu neu bei Contao um das verständlich zu erklären wahrscheinlich .

Nachrichten bestehen unter anderem bspw. aus folgenden Eigenschaften:

• Titel
• Untertitel
• Datum & Uhrzeit
• Teasertext
• Teaserbild
• …
• Detailinhalt

Der Detailinhalt (falls vorhanden) wird angezeigt, wenn du in einer Newsliste auf "mehr" klickst, bzw. auf die Überschrift. Der Detailinhalt besteht aus einzelnen Inhaltselementen, die du jedem Nachrichtenbeitrag hinzufügen kannst (wenn du bei einem Nachrichteneintrag auf den Stift zum editieren klickst).

Bei deinem Portfolio wird der Detailinhalt nie angezeigt, weil das Template so abgeändert wurde, dass bei einem Klick darauf einfach das Original des Teaserbildes in einer Lightbox angezeigt wird. Ursprünglich war das nicht so (siehe https://community.contao.org/de/show...n-Hochformaten).