Thumbnails werden nicht geladen tpl_modified

[Tomcraft]

[...]
Nachstellbar auf www.babyzwirn.de (nackter 2.0.4.2 shop mit responsive modified template und nur der Einbindung des Lazyloadskripts)
[...]

Installier den Shop erstmal richtig, dann reden wir weiter...

Installiert unter http://babyzwirn.de und per .htaccess weiter geleitet auf http://www.babyzwirn.de, so dass nun auch beispielsweise alle Font Awesome Symbole nicht geladen werden können!

Grüße

Torsten

[Timm]

Ändert natürlich nichts am Problem, aber ich hab den Testshop nun auch mit ssl gesichert und die Weiterleitungen eingerichtet. Das Problem besteht ja auch in einer korrekt eingerichteten 1 zu 1 Kopie meines Shops die ich aber wegen duplicate content nicht online stellen möchte zum testen. Deshalb war das nur eine schnelle Testinstallation, um das Problem auch optisch zu schildern.

Gruß Timm

P.S. Die .htaccess war gar nicht aktiv und auch beim Hoster waren keine Weiterleitungen eingerichtet. Hat mich auch gewundert, warum er dennoch immer weiterleitet auf www.babyzwirn.de. Auch das http hatte er nicht vor die Domain gesetzt, obwohl es in der configure.php angegeben wurde.

[p3e]

Ich halte die Art der Einbindung von unveil aus zwei Gründen für ungeeignet.

• Die Hinterlegung des loading.gif bei jedem img-Tag bläht den html-Code unnötig auf.
• Die Festlegung auf die Klasse unveil halte ich für überflüssig und unnötig umständlich.

Statt

Code: Javascript  [Auswählen]

$(window).on('load',function() {
    $(".unveil").show();
    $(".unveil").unveil(200);
  });

würde ich

Code: Javascript  [Auswählen]

$(document).ready(function(){
        $("img").each(function(index){
                if(!$(this).attr("src")){
                        $(this).attr('src','/img/loading.gif');
                        $(this).unveil(200);
                }
        });
});

vorschlagen. Dadurch wird die Klasse unveil unnötig, da das unvei-Lazyload dadurch auf alle img-Tags angewendet wird, die keine src-Angaben besitzen. Ein potenzielles loading.gif wird einfach nachträglich eingefügt.

Vorteile:
Sowohl das Weglassen der Klasse als auch das Weglassen des loading.gifs verkürzen den übertragenen html-Code (pagespeed steigt).
Bei Grafiken die nachträglich für unveil vorbereitet werden sollen, reicht es, aus "scr" "data-src" zu machen. (den noscript-Part nicht vergessen).

[Tomcraft]

Ich habe den Verbesserungsvorschlag in Ticket #1557 festgehalten, vielen Dank!

Nachtrag: Das scheint auch keine optimale Lösung zu sein, siehe Kommentar von Markus im Ticket.

Grüße

Torsten

[p3e]

Das mit dem "Broken Image"-Symbol kann ich bei mir nicht bestätigen. Kann aber gut sein, dass mein neuer Rechner einfach zu schnell ist. Alternativ könnte man den img-Tag unsichtbar und erst beim aktivieren von unveil sichtbar werden lassen. Dann wäre das Problem beseitigt.
Es kann aber auch daran liegen, dass das loading.gif ja im Demoshop im css Ordner liegt. Hatte ich übersehen, ist bei mir nicht so. Vielleicht deshalb das "Broken Image"-Symbol bei Dir?

Ich habe aber noch eine andere Lösung, die noch mehr html-Output spart indem der img-Tag nur im noscript-Tag vorhanden ist und außerhalb erst per per jquery erzeugt wird.
Folgt in ein paar Minuten. Muss ich erst ins Reine schreiben.

[p3e]

Hier die kürzere Version:
Der Shop erzeugt beim Listing pro Produkt beim aktuellen responsive Template zB. folgenden Output:

Code: PHP  [Auswählen]

<a href="https://dev.modified-shop.org/Testkategorie-1/Testartikel-1::1.html">
        <img class="unveil" src="https://dev.modified-shop.org/templates/tpl_modified_responsive/css/images/loading.gif" data-src="https://dev.modified-shop.org/images/product_images/thumbnail_images/1_0.jpg" alt="Testartikel 1" />
</a>
<noscript>
<a href="https://dev.modified-shop.org/Testkategorie-1/Testartikel-1::1.html">
        <img src="https://dev.modified-shop.org/images/product_images/thumbnail_images/1_0.jpg" alt="Testartikel 1" />
</a>
</noscript>

Das ist schon mal doppelt gemoppelt, denn der Link wird sowohl außerhalb und innerhalb vom noscript-Tag erzeugt. Kürzer und funktionsgleich wäre:

Code: PHP  [Auswählen]

<a href="https://dev.modified-shop.org/Testkategorie-1/Testartikel-1::1.html">
        <img class="unveil" src="https://dev.modified-shop.org/templates/tpl_modified_responsive/css/images/loading.gif" data-src="https://dev.modified-shop.org/images/product_images/thumbnail_images/1_0.jpg" alt="Testartikel 1" />
<noscript>
        <img src="https://dev.modified-shop.org/images/product_images/thumbnail_images/1_0.jpg" alt="Testartikel 1" />
</noscript>
</a>

Das ist schon mal kürzer. Jetzt fällt immer noch auf, dass der img-Tag leicht verändert aber doppelt auftaucht. Kann man das noscript entfernen und den img-Tag so anpassen, dass er für unveil-Lazyload geeignet ist?
Ja, das geht durch folgenden JavaScript Code:

Code: Javascript  [Auswählen]

$(document).ready(function(){
        $('noscript').replaceWith(function() {
                return this.textContent.replace('src', 'class="unveil" src="https://dev.modified-shop.org/templates/tpl_modified_responsive/css/images/loading.gif" data-src') ;
        });
        $(".unveil").unveil(200); // Testweise kann man hier auch -200 einegben
});

Im html reicht dann für jedes Produkt:

Code: PHP  [Auswählen]

<a href="https://dev.modified-shop.org/Testkategorie-1/Testartikel-1::1.html">
<noscript>
        <img src="https://dev.modified-shop.org/images/product_images/thumbnail_images/1_0.jpg" alt="Testartikel 1" />
</noscript>
</a>

Das ist mehr als doppelt so kurz als zuvor.

Was macht das neue JavaScript genau?
Sobald die Seite komplett geladen ist, werden (falls JavaScript aktiv ist) alle noscript-Tags gelöscht und der img-Tag um die Klasse unveil erweitert, das loading gif hinzugefügt und die ursprüngliche src-Adresse als data-src für das spätere Nachladen (unveil-LazyLoad) umgeschrieben. Da das Umschreiben in einem rewrite geht, ist das recht flott.
Im zweiten Schritt wird dann das eigentliche unveil-Lazyload gestartet.

[Timm]

Danke, dass du am Thema drangeblieben bist und noch weitere Verbesserungsvorschläge gemacht hast. Auch wenn mein Problem mit lazyload nicht gelöst wurde, hatte der Thread ja dann am Ende was gutes für alle.

Ich hab dadurch auch noch festgestellt, dass mit der jquery 3.3.1 der bxSlider in der neuesten Version 4.2.14 und unveil2 funktionieren würde, weil ich das als Fehlerquelle für lazyload im Slider ausschließen wollte.

Gruß Timm

[p3e]

Wobei es mir jetzt in erster Linie darum ging den HTML-Output nicht unnötig durch lazyload (egal welches man nutzt) aufzublasen.

[Timm]

So und nicht anders hab ich das auch verstanden. Danke

[Timm]

Danke nochmal für die Hilfe @hpzeller und @p3e.

Ich hab es nun aber mit einem komplett anderen Bestsellerslider von Magictoolbox gelöst, der die lazyload Nachladefunktion schon integriert hat und auch ne Menge an Einstellmöglichkeiten für Effekte hergibt.

Gruß Timm

[Timm]

... es ist doch klar, dass es ein data-src Attribut braucht welche die URL des zu ladenden Bildes enthält, aber ein src Attribut welches die URL eines Platzhalters enthält braucht es nicht.

Nachdem ich das src und das loading.gif weggelassen habe, bemängelt der w3c Validator nun, dass es fehlt.

Error: Element img is missing required attribute src.

Kann man das w3c konform lösen?

Gruß Timm

[hpzeller]

Eine Möglichkeit wäre das src-Attribut drin zu lassen und als Source ein Base64 codiertes transparentes Pixel einzutragen.

Code: XML  [Auswählen]

src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="

[...]
Nachdem ich das src und das loading.gif weggelassen habe, bemängelt der w3c Validator nun, dass es fehlt.

Error: Element img is missing required attribute src.

[...]

Der W3C Validator hat damit ein Problem, weil er nur das HTML Dokument validiert, die Browser's haben damit aber kein Problem, weil das src-Attribut per JavaScript während des Renderns der Seite in die img-Tags hineingeschrieben werden.

Gruss
Hanspeter

[Timm]

Danke dir - probier ich aus.

Es kommt auch nicht zu Darstellungsfehlern. Hab nur die Befürchtung, dass es einen gewissen negativen Rankingfaktor hat, wenn die Seite nicht w3c konform ist bzw einen positiven, wenn sie es ist. Weil viele der SEO Überprüfungstools das prüfen.

Gruß Timm

[Timm]

@Hanspeter
Was sollte mit deiner Lösung in der Webkonsole als src angezeigt werden? Etwas mit base64... oder das selbe, dass bei data-src steht?

Hab für die Themenweltenboxen auf der Startseite das mal so eingefügt und ist auch sichtbar auf meiner öffentlichen Seite:

Code: XML  [Auswählen]

<a href="{$category.CATEGORY_LINK}">
        {if $category.CATEGORY_IMAGE_TRUE != ''}<span class="subcat_image"><span class="subcat_image_inner cf"><img class="unveil" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-src="{$category.CATEGORY_IMAGE}" alt="{$category.CATEGORY_NAME|onlytext}" /><noscript><img src="{$category.CATEGORY_IMAGE}" alt="{$category.CATEGORY_NAME|onlytext}" /></noscript></span></span>{/if}

In der Konsole zeigt er mir dann aber als src das gleiche wie data-src an. So war es ohne src auch schon, nur das die Stellen jetzt vertauscht sind und src nun vor data-src steht. Ist das richtig, so?

nun mit base64
[ Für Gäste sind keine Dateianhänge sichtbar ]

vorher ohne src angabe aber dennoch vorhanden nur hinter Data-src
[ Für Gäste sind keine Dateianhänge sichtbar ]

Im w3c Validator sind die Fehler für diese Bilder dadurch nicht mehr vorhanden. Wundert mich halt nur, dass man da nichts mit base64 sieht.

Will nur sicher gehen, bevor ich das für alle Unveil Grafiken ändere.

Gruß Timm

[hpzeller]

Hallo Timm,

in der Konsole siehst du das Ergebnis nach dem Ausführen von JavaScript. Entweder du deaktivierst JavaScript in der Konsole (F1 drücken wenn Konsole aktiv, dann Hacken setzen bei JavaScript deaktivieren), oder du schaust in den Queltext der Seite.

Ich persönlich würde das src-Attribut weglassen, auch wenn es nicht valide ist.

PS:
Hatte früher, zu Zeiten von XHTML, auch viel Wert auf validen XHTML Code gelegt, heute ist es mir bei HTML5 egal solange es in den Browsern keine Probleme verursacht.

Gruss
Hanspeter