Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:

Autor Thema: Thumbnails werden nicht geladen tpl_modified  (Gelesen 1306 mal)

Offline Tomcraft

  • modified Team
  • *****
  • Gravatar
  • Beiträge: 43.408
  • Geschlecht: Männlich
    • Teile Beitrag
    • https://www.modified-shop.org
Re: Thumbnails werden nicht geladen tpl_modified
« Antwort #45 am: 28. November 2018, 13:59:22 »
[...]
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

Offline FräuleinGarn

  • Viel Schreiber
  • *****
  • Beiträge: 2.272
    • Teile Beitrag
    • Fräulein Garn's Stoffbiotop
Re: Thumbnails werden nicht geladen tpl_modified
« Antwort #46 am: 28. November 2018, 14:57:02 »
Ä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.

Offline p3e

  • Experte
  • *****
  • Beiträge: 1.943
    • Teile Beitrag
Re: Thumbnails werden nicht geladen tpl_modified
« Antwort #47 am: 28. November 2018, 19:58:46 »
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).

Offline Tomcraft

  • modified Team
  • *****
  • Gravatar
  • Beiträge: 43.408
  • Geschlecht: Männlich
    • Teile Beitrag
    • https://www.modified-shop.org
Re: Thumbnails werden nicht geladen tpl_modified
« Antwort #48 am: 29. November 2018, 05:00:29 »
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

Offline p3e

  • Experte
  • *****
  • Beiträge: 1.943
    • Teile Beitrag
Re: Thumbnails werden nicht geladen tpl_modified
« Antwort #49 am: 29. November 2018, 17:03:11 »
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.

Offline p3e

  • Experte
  • *****
  • Beiträge: 1.943
    • Teile Beitrag
Re: Thumbnails werden nicht geladen tpl_modified
« Antwort #50 am: 29. November 2018, 17:39:04 »
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.

Offline FräuleinGarn

  • Viel Schreiber
  • *****
  • Beiträge: 2.272
    • Teile Beitrag
    • Fräulein Garn's Stoffbiotop
Re: Thumbnails werden nicht geladen tpl_modified
« Antwort #51 am: 29. November 2018, 21:56:22 »
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

Offline p3e

  • Experte
  • *****
  • Beiträge: 1.943
    • Teile Beitrag
Re: Thumbnails werden nicht geladen tpl_modified
« Antwort #52 am: 29. November 2018, 22:29:32 »
Wobei es mir jetzt in erster Linie darum ging den HTML-Output nicht unnötig durch lazyload (egal welches man nutzt) aufzublasen.

Offline FräuleinGarn

  • Viel Schreiber
  • *****
  • Beiträge: 2.272
    • Teile Beitrag
    • Fräulein Garn's Stoffbiotop
Re: Thumbnails werden nicht geladen tpl_modified
« Antwort #53 am: 30. November 2018, 09:50:16 »
So und nicht anders hab ich das auch verstanden. Danke

Offline FräuleinGarn

  • Viel Schreiber
  • *****
  • Beiträge: 2.272
    • Teile Beitrag
    • Fräulein Garn's Stoffbiotop
Re: Thumbnails werden nicht geladen tpl_modified
« Antwort #54 am: 07. Dezember 2018, 22:31:13 »
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

Werbung / Banner buchen

Teile per facebook Teile per linkedin Teile per twitter

xx
SSL - Bilder werden nicht geladen

Begonnen von TechnikOnkel am Admin- und Shopbereich

20 Antworten
6972 Aufrufe
Letzter Beitrag 29. März 2011, 06:07:27
von TechnikOnkel
xx
Javascript Dateien werden in 1.06 nicht geladen

Begonnen von Gradler am Admin- und Shopbereich

2 Antworten
1368 Aufrufe
Letzter Beitrag 18. Februar 2014, 16:05:06
von Gradler
topicsolved
Bilder werden nicht hoch geladen und angezeigt

Begonnen von alarm4u am Admin- und Shopbereich

4 Antworten
1567 Aufrufe
Letzter Beitrag 22. November 2010, 20:25:11
von Tomcraft
xx
Thumbnails werden nicht angezeigt?

Begonnen von akbal12 am Installation / Update

14 Antworten
1049 Aufrufe
Letzter Beitrag 28. Oktober 2017, 15:43:50
von FräuleinGarn