Come possiamo caricare istantaneamente la galleria di immagini dei prodotti senza il ritardo in magento?

questo è il mio primo quesiton nudo con me :)

Problema: la galleria di fotorama utilizzata in Magento 2 rende l'esperienza utente lenta. Non importa quanto velocemente il mio magento 2 statico memorizzato nella cache viene eseguito se l'immagine del prodotto non è "istantanea".

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

Se vai al link sopra (un negozio mostrato sul blog di Magento), puoi vedere che si apre, quindi mostra un'icona di caricamento e quindi carica le immagini. È orribile.

Dovrebbe caricarsi all'istante. Come bamm. Fatto, specialmente con cache a pagina intera e opcache abilitati.

C'è un modo per cambiare questo comportamento? Per caricarlo all'istante?

Per l'utente, è l '"elemento" più importante della pagina. e si carica come l' ultimo .

Non capisco come nessuno si stia lamentando di questo.

Questo è il commercio elettronico, l'unica cosa che conta sono le "immagini". È ciò che interessa all'utente. Il motivo per cui fanno clic sulla pagina del prodotto è "vedere meglio le immagini. Personalmente per me mi dà davvero fastidio. Per nessun motivo mi arrabbio molto e poi mi chiedo se sono pazzo?

Grazie in anticipo, sono solo confuso su come una cosa del genere possa accadere.

Sul mio magento 1, si carica all'istante.

— Fancyman
fonte

D'accordo, potrebbero almeno visualizzare l'immagine di base mentre si carica il fotorama. Dovrò costruire un modulo per farlo.

— Aaron Allen,

L'hanno aggiunto per presentare una richiesta di miglioramento. Sul cellulare è anche peggio. Ma la cosa divertente è che quando vai sul sito web di fotorama su dispositivi mobili, quelle grandi gallerie di immagini si caricano più velocemente di quelle di magento. Quando fai un aggiornamento, è quasi istantaneo. Il problema sta nel magento.

— Fancyman,

Sicuramente deve essere una soluzione per questo ormai? È ancora super lento, grazie per aver posto la domanda, continuerò a controllare su questo per vedere se qualcosa cambia mai ahah.

— Andy Jones,

A volte questo comando funzionerà: php bin / magento catalog: images: resize

— Saphal Jha

Che cosa significa e come fare "Risolto il problema del salto dei contenuti. Il caricatore deve avere le stesse dimensioni della galleria" Ho riscontrato un problema che si verifica quando il carico del mio prodotto rispetto all'immagine viene mostrato prima piccolo e più grande

— Akbar Lu

Risposte:

Ecco una semplice soluzione che farà visualizzare l'immagine di base del prodotto durante il caricamento di JS. Crea il seguente file nel tuo tema: {theme_dir}/Magento_Catalog/templates/product/view/gallery.phtml contenente:

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

Spero che questo ti aiuti.

— Aaron Allen
fonte

Grazie Aaron! Ci proverò stasera quando sarò a casa! Lo apprezzo davvero!

— Fancyman,

Aaron l'ho provato. Funziona. È una buona soluzione temporanea ma vorrei che potessero correggere la velocità di caricamento della galleria. Non capisco perché si carica così lentamente. Sul sito fotorama, è una galleria più grande e si carica all'istante. Puoi anche provare sul tuo fotorama.io mobile, puoi vedere che è molto più veloce e le immagini sono molto più grandi.

— Fancyman,

@Aaron Allen, per favore, spiega cosa hai fatto con un commento nel post o nel codice.

— LucScu,

Ho aggiunto la linea per il primo imgelemento.

— Aaron Allen,

Questo ha funzionato per me su Magento EE 2.1.7.

— sparecycle

La risposta di Aaron Allen è stata grandiosa e l'ho usata per capire come farlo per la mia configurazione personalizzata.

Tutto quello che dovevo fare era aggiungere l'immagine con un po 'di CSS in linea e aggiungere padding-bottom: 100% alla maschera di caricamento.

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

È abbastanza simile alla risposta sopra ma volevo aggiungere i miei 2 centesimi.

— James Harrington
fonte