Wie können wir die Produktbildergalerie ohne Verzögerung in Magento sofort laden?

11

Dies ist meine erste Frage nackt mit mir :)

Problem: Die in Magento 2 verwendete Fotorama-Galerie macht die Benutzererfahrung träge. Es spielt keine Rolle, wie schnell mein zwischengespeichertes statisches Magento 2 ausgeführt wird, wenn das Produktbild nicht "sofort" ist.

https://www.ninewest.co.uk/sandals/high-heel/allclear-black-snake-print-nine-west

Wenn Sie zu dem obigen Link gehen (ein Geschäft, das im Magento-Blog angezeigt wird), können Sie sehen, dass es geöffnet wird, dann ein Ladesymbol angezeigt wird und dann die Bilder geladen werden. Das ist schrecklich.

Es sollte sofort geladen werden. Wie bamm. Fertig, speziell mit aktiviertem Ganzseiten-Cache und Opcache.

Gibt es eine Möglichkeit, dieses Verhalten zu ändern? Um es sofort zu laden?

Für den Benutzer ist es das wichtigste "Element" auf der Seite. und es wird als neueste geladen .

Ich verstehe nicht, wie sich niemand darüber beschwert.

Dies ist E-Commerce, nur "Bilder" sind wichtig. Es ist das, was den Benutzer interessiert. Der Grund, warum sie auf die Produktseite klicken, ist, "die Bilder besser zu sehen. Persönlich nervt es mich wirklich. Ohne Grund werde ich super wütend und frage mich dann selbst, ob ich verrückt bin?

Vielen Dank im Voraus, ich bin nur verwirrt, wie so etwas passieren könnte.

Auf meinem Magento 1 wird es sofort geladen.

magento2  product-images  magento-2.1  fotorama-slider 
— Hübscher Mann
quelle
Einverstanden, sie könnten zumindest das Basisbild anzeigen lassen, während Fotorama geladen wird. Ich muss dafür ein Modul bauen.
— Aaron Allen
Sie haben es hinzugefügt, um Verbesserungswünsche zu erfüllen. Auf dem Handy ist es noch schlimmer. Aber lustig ist, wenn Sie auf dem Handy auf die fotorama-Website gehen, wird diese große Bildergalerie schneller geladen als die von Magento. Wenn Sie eine Aktualisierung durchführen, erfolgt dies fast sofort. Das Problem liegt bei Magento.
— Fancyman
Muss das schon eine Lösung sein? Es ist immer noch super langsam, danke, dass du die Frage gestellt hast. Ich werde das immer wieder überprüfen, um zu sehen, ob sich jemals etwas ändert, haha.
— Andy Jones
Manchmal funktioniert dieser Befehl: php bin / magento catalog: images:
— resize
Was bedeutet es und wie geht es weiter? "Fix für das Springen von Inhalten. Der Lader muss die gleiche Größe wie die Galerie haben." Ich habe ein Problem gefunden, bei dem meine Produktladung als Bild zuerst klein und als groß
— angezeigt wird

Antworten:

10

Hier ist eine einfache Lösung, mit der das Basis-Image des Produkts angezeigt wird, während der JS geladen wird. Erstellen Sie die folgende Datei in Ihrem Thema: {theme_dir}/Magento_Catalog/templates/product/view/gallery.phtml Enthält:

<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
    <div data-role="loader" class="loading-mask">
        <div class="loader">

            <img src="<?php echo $block->getGalleryImages()->getFirstItem()->getData('medium_image_url') ?>" style="max-width: 100%; max-height: 100%">

            <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
                 alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>">
        </div>
    </div>
</div>
<!--Fix for jumping content. Loader must be the same size as gallery.-->
<script>
    var config = {
            "width": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
            "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
                        ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
            "navtype": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navtype"); ?>",
            "height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height'); ?>
        },
        thumbBarHeight = 0,
        loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0];

    if (config.navtype === 'horizontal') {
        thumbBarHeight = config.thumbheight;
    }

    loader.style.paddingBottom = ( config.height / config.width * 100) + "%";
</script>
<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                "mixins":["magnifier/magnify"],
                "magnifierOpts": <?php /* @escapeNotVerified */ echo $block->getMagnifier(); ?>,
                "data": <?php /* @escapeNotVerified */ echo $block->getGalleryImagesJson(); ?>,
                "options": {
                    "nav": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/nav"); ?>",
                    <?php if (($block->getVar("gallery/loop"))): ?>
                        "loop": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/loop"); ?>,
                    <?php endif; ?>
                    <?php if (($block->getVar("gallery/keyboard"))): ?>
                        "keyboard": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/keyboard"); ?>,
                    <?php endif; ?>
                    <?php if (($block->getVar("gallery/arrows"))): ?>
                        "arrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/arrows"); ?>,
                    <?php endif; ?>
                    <?php if (($block->getVar("gallery/allowfullscreen"))): ?>
                        "allowfullscreen": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/allowfullscreen"); ?>,
                    <?php endif; ?>
                    <?php if (($block->getVar("gallery/caption"))): ?>
                        "showCaption": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/caption"); ?>,
                    <?php endif; ?>
                    "width": "<?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>",
                    "thumbwidth": "<?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'width'); ?>",
                    <?php if ($block->getImageAttribute('product_page_image_small', 'height') || $block->getImageAttribute('product_page_image_small', 'width')): ?>
                        "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
                        ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
                    <?php endif; ?>
                    <?php if ($block->getImageAttribute('product_page_image_medium', 'height') || $block->getImageAttribute('product_page_image_medium', 'width')): ?>
                        "height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height')
                        ?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
                    <?php endif; ?>
                    <?php if ($block->getVar("gallery/transition/duration")): ?>
                        "transitionduration": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/transition/duration"); ?>,
                    <?php endif; ?>
                    "transition": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/transition/effect"); ?>",
                    <?php if (($block->getVar("gallery/navarrows"))): ?>
                        "navarrows": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/navarrows"); ?>,
                    <?php endif; ?>
                    "navtype": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navtype"); ?>",
                    "navdir": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navdir"); ?>"
                },
                "fullscreen": {
                    "nav": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/nav"); ?>",
                    <?php if ($block->getVar("gallery/fullscreen/loop")): ?>
                        "loop": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/loop"); ?>,
                    <?php endif; ?>
                    "navdir": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/navdir"); ?>",
                    <?php if ($block->getVar("gallery/transition/navarrows")): ?>
                        "navarrows": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/navarrows"); ?>,
                    <?php endif; ?>
                    "navtype": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/navtype"); ?>",
                    <?php if ($block->getVar("gallery/fullscreen/arrows")): ?>
                        "arrows": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/arrows"); ?>,
                    <?php endif; ?>
                    <?php if ($block->getVar("gallery/fullscreen/caption")): ?>
                        "showCaption": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/caption"); ?>,
                    <?php endif; ?>
                    <?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?>
                        "transitionduration": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/transition/duration"); ?>,
                    <?php endif; ?>
                    "transition": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/transition/effect"); ?>"
                },
                "breakpoints": <?php /* @escapeNotVerified */ echo $block->getBreakpoints(); ?>
            }
        }
    }
</script>

Hoffe das hilft.

— Aaron Allen
quelle
Danke Aaron! Ich werde es heute Abend versuchen, wenn ich zu Hause bin! Schätze es wirklich!
— Fancyman
Aaron, ich habe es versucht. Es klappt. Es ist eine schöne vorübergehende Lösung, aber ich wünschte, sie hätten die Ladegeschwindigkeit der Galerie korrigieren können. Ich verstehe nicht, warum es so langsam lädt. Auf der Fotorama-Website ist die Galerie größer und wird sofort geladen. Sie können sogar Ihr mobiles fotorama.io anprobieren. Sie können sehen, dass es viel schneller ist und die Bilder viel größer sind.
— Fancyman
@ Aaron Allen, bitte erkläre, was du mit einem Kommentar im Beitrag oder im Code gemacht hast.
— LucScu
1
Ich habe die Zeile für das erste imgElement hinzugefügt .
— Aaron Allen
Dies funktionierte für mich unter Magento EE 2.1.7.
— Sparecycle
1

Die Antwort von Aaron Allen war großartig und ich habe sie verwendet, um herauszufinden, wie es für mein benutzerdefiniertes Setup geht.

Alles was ich tun musste war das Bild mit etwas Inline CSS hinzuzufügen und Padding-Bottom: 100% zur Lademaske hinzuzufügen.

...
<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
    <div data-role="loader" class="loading-mask" style="padding-bottom:100%;">
        <div class="loader">
            <img src="<?php echo $_product->getData('img_url'); ?>" style="max-width: 100%; max-height: 100%; display: block;">
            <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
                 alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>">
        </div>
    </div>
</div>
...

Es ist der obigen Antwort ziemlich ähnlich, aber ich wollte meine 2 Cent hinzufügen.

— James Harrington
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.