Magento में देरी के बिना हम उत्पाद छवि गैलरी को तुरंत कैसे लोड कर सकते हैं?

Question

यह मेरे साथ मेरे पहले quesiton नंगे :)

समस्या: मैगेंटो 2 में उपयोग की जाने वाली फोटोमा गैलरी उपयोगकर्ता के अनुभव को सुस्त बना देती है। इससे कोई फर्क नहीं पड़ता कि मेरी कैश्ड स्टैटिक मैगनेटो 2 कितनी तेजी से चलती है अगर उत्पाद की छवि "तत्काल" नहीं है।

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

यदि आप उपरोक्त लिंक पर जाते हैं, (Magento ब्लॉग पर स्टोर की गई दुकान), तो आप इसे खोलते हुए देख सकते हैं, फिर यह एक लोडिंग आइकन दिखाता है और फिर यह छवियों को लोड करता है। यह खराब है।

इसे तुरंत लोड करना चाहिए। बाम की तरह। हो गया, विशेष रूप से पूर्ण पृष्ठ कैश और opcache सक्षम किया गया।

क्या इस व्यवहार को बदलने का कोई तरीका है? इसे तुरंत लोड करने के लिए?

उपयोगकर्ता के लिए, यह पृष्ठ पर सबसे महत्वपूर्ण "तत्व" है। और यह नवीनतम के रूप में लोड होता है ।

मुझे समझ नहीं आता कि कोई इस बारे में कैसे शिकायत कर रहा है।

यह ई कॉमर्स है, केवल एक चीज जो "चित्र" है। यह उपयोगकर्ता की परवाह करता है। उत्पाद पृष्ठ पर क्लिक करने का कारण "छवियों को बेहतर देखना है। मेरे लिए व्यक्तिगत रूप से यह वास्तव में मुझे परेशान करता है। बिना किसी कारण के मैं सुपर क्रोधित हो जाता हूं और फिर मैं अपने आप से पूछता हूं कि क्या मैं पागल हूं?"

अग्रिम धन्यवाद, मैं बस उलझन में हूँ कि ऐसी चीज कैसे खुश हो सकती है।

मेरे Magento 1 पर, यह तुरंत लोड होता है।

Comments

सहमत थे, वे कम से कम आधार छवि प्रदर्शित कर सकते हैं जबकि फ़ोटोरमा लोड करता है। मुझे ऐसा करने के लिए एक मॉड्यूल का निर्माण करना होगा।

— एरोन एलन

उन्होंने इसे सुविधा सुधार अनुरोध में जोड़ा है। मोबाइल पर तो यह और भी बुरा है। लेकिन मज़ेदार बात यह है कि जब आप मोबाइल पर fotorama वेबसाइट पर जाते हैं, तो उन बड़ी इमेज गैलरी का लोड तेजी से बढ़ जाता है और फिर magento एक। जब आप रिफ्रेश करते हैं, तो यह लगभग तुरंत होता है। समस्या Magento के साथ है।

— Fancyman

निश्चित रूप से अब तक इसके लिए एक निश्चित होना चाहिए? यह अभी भी सुपर धीमी है, सवाल पूछने के लिए धन्यवाद, मैं यह देखने के लिए कि क्या कभी हाहा बदलता है, इस पर वापस जाँच करता रहेगा।

— एंडी जोंस

कभी-कभी यह कमांड काम करेगा: php bin / magento कैटलॉग: चित्र: आकार

— Saphal Jha

इसका क्या मतलब है और कैसे करना है "कूदने की सामग्री के लिए फिक्स। लोडर को गैलरी के समान आकार होना चाहिए" मुझे एक समस्या मिली जो तब होती है जब मेरा उत्पाद लोड छवि से पहले छोटा और बड़ा दिखाता है

— अकबर मो

Answer 1

यहां एक सरल समाधान है जिससे जेएस लोड होने के दौरान उत्पाद की आधार छवि प्रदर्शित होगी। अपने विषय में निम्नलिखित फ़ाइल बनाएँ: {theme_dir}/Magento_Catalog/templates/product/view/gallery.phtml युक्त:

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

उम्मीद है की यह मदद करेगा।

Comments

धन्यवाद हारून! मैं आज रात एक बार घर पर कोशिश करूँगा! मैं इसकी प्रशंसा करता हूँ!

— Fancyman

हारून मैंने इसकी कोशिश की। यह काम करता हैं। यह एक अच्छा अस्थायी समाधान है, लेकिन मुझे लगता है कि वे गैलरी लोड गति को ठीक कर सकते हैं। मुझे समझ नहीं आता कि यह इतना धीमा क्यों है। Fotorama साइट पर, यह बड़ी गैलरी है और यह तुरंत लोड होती है। तुम भी अपने मोबाइल fotorama.io पर कोशिश कर सकते हैं, यू देख सकते हैं यह बहुत तेजी से है और छवियों बहुत बड़ा है।

— फैंकीमैन

@ ऐरन एलन कृपया बताएं कि आपने पोस्ट में या कोड में एक टिप्पणी के साथ क्या किया है।

— लुकस्कु

मैंने पहले imgतत्व के लिए लाइन जोड़ी ।

— हारून एलन

यह मेरे लिए Magento EE 2.1.7 पर काम किया।

— स्पेयर साइकिल

Answer 2

हारून एलन का जवाब बहुत अच्छा था और मैंने इसका इस्तेमाल अपने कस्टम सेटअप के लिए यह करने के लिए किया।

मुझे बस इतना करना था कि इमेज को कुछ इनलाइन css के साथ जोड़ें और पैडिंग-बॉटम जोड़ें: लोडिंग-मास्क पर 100%।

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

यह ऊपर दिए गए उत्तर के समान है लेकिन मैं अपने 2 सेंट जोड़ना चाहता था।