Làm thế nào chúng ta có thể tải bộ sưu tập hình ảnh sản phẩm ngay lập tức mà không có sự chậm trễ trong magento?

đây là câu hỏi đầu tiên của tôi trần với tôi :)

Vấn đề: Bộ sưu tập fotorama được sử dụng trong magento 2 khiến trải nghiệm người dùng chậm chạp. Không quan trọng việc magento 2 được lưu trong bộ nhớ cache của tôi chạy nhanh như thế nào nếu hình ảnh sản phẩm không "tức thì".

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

Nếu bạn đi đến liên kết ở trên, (một cửa hàng được hiển thị trên blog magento), bạn có thể thấy nó mở ra, sau đó nó hiển thị một biểu tượng tải và sau đó nó tải hình ảnh. Điều đó thật kinh khủng.

Nó sẽ tải ngay lập tức. Như bamm. Xong, Đặc biệt với bộ đệm toàn bộ trang và opcache được bật.

Có cách nào để thay đổi hành vi này? Để tải nó ngay lập tức?

Đối với người dùng, đó là "yếu tố" quan trọng nhất trên trang. và nó tải như là mới nhất .

Tôi không hiểu làm thế nào không ai phàn nàn về điều này.

Đây là thương mại điện tử, điều duy nhất quan trọng là "hình ảnh". Đó là những gì người dùng quan tâm. Lý do họ nhấp vào trang sản phẩm là để "xem hình ảnh tốt hơn. Cá nhân đối với tôi nó thực sự làm tôi bực mình. Không có lý do gì tôi trở nên siêu tức giận và sau đó tôi tự hỏi mình có bị điên không?

Cảm ơn trước, tôi chỉ bối rối làm thế nào điều đó có thể xảy ra.

Trên magento 1 của tôi, nó tải ngay lập tức.

— Fancyman
nguồn

Đồng ý, ít nhất họ có thể có hình ảnh cơ sở được hiển thị trong khi tải fotorama. Tôi sẽ phải xây dựng một mô-đun để làm điều đó.

— Aaron Allen

Họ đã thêm nó vào tính năng yêu cầu cải tiến. Trên thiết bị di động thậm chí còn tệ hơn. Nhưng điều buồn cười là, khi bạn truy cập trang web fotorama trên thiết bị di động, bộ sưu tập hình ảnh lớn đó sẽ tải nhanh hơn magento. Khi bạn làm mới, nó gần như ngay lập tức. Vấn đề nằm ở magento.

— Fancyman

Chắc chắn phải là một sửa chữa cho điều này bây giờ? Nó vẫn siêu chậm, cảm ơn vì đã đặt câu hỏi, tôi sẽ tiếp tục kiểm tra lại điều này để xem có gì thay đổi không haha.

— andy jones

Đôi khi lệnh này sẽ hoạt động: Danh mục php bin / magento: hình ảnh: thay đổi kích thước

— Saphal Jha

Ý nghĩa và làm thế nào để làm những gì tôi tìm thấy một vấn đề đó là khi tải sản phẩm của tôi hơn show hình ảnh đầu tiên nhỏ và hơn lớn "Fix for nhảy nội dung Loader phải có cùng kích thước như thư viện."

— Akbar Mo

Câu trả lời:

Đây là một giải pháp đơn giản sẽ khiến hình ảnh cơ sở của sản phẩm được hiển thị trong khi JS đang tải. Tạo tệp sau trong chủ đề của bạn: {theme_dir}/Magento_Catalog/templates/product/view/gallery.phtml có chứa:

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

Hi vọng điêu nay co ich.

— Aaron Allen
nguồn

Cảm ơn Aaron! Tôi sẽ cố gắng tối nay khi tôi về nhà! Thực sự đánh giá cao nó!

— Fancyman

Aaron tôi đã thử nó. Nó hoạt động. Đó là một giải pháp tạm thời tốt đẹp nhưng tôi ước họ có thể sửa tốc độ tải của thư viện. Tôi không hiểu tại sao nó tải quá chậm. Trên trang web fotorama, đó là bộ sưu tập lớn hơn và nó tải ngay lập tức. Bạn thậm chí có thể thử trên fotorama.io trên điện thoại di động của mình, bạn có thể thấy nó nhanh hơn rất nhiều và hình ảnh còn lớn hơn nhiều.

— Fancyman

@Aaron Allen vui lòng giải thích những gì bạn đã làm với một nhận xét trong bài đăng hoặc trong mã.

— LucScu

Tôi đã thêm dòng cho imgphần tử đầu tiên .

— Aaron Allen

Điều này làm việc cho tôi trên Magento EE 2.1.7.

— sparecycl

Câu trả lời của Aaron Allen rất hay và tôi đã sử dụng nó để tìm ra cách thực hiện nó cho thiết lập tùy chỉnh của mình.

Tất cả những gì tôi phải làm là thêm hình ảnh với một số css nội tuyến và thêm phần đệm dưới cùng: 100% vào mặt nạ tải.

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

Nó khá giống với câu trả lời ở trên nhưng tôi muốn thêm 2 xu của mình.

— James Harrington
nguồn