Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(storefront): BCTHEME-16 Cornerstone - loading of thumbnail image delayed on cart page #1925

Merged
merged 3 commits into from
Jan 5, 2021
Merged

fix(storefront): BCTHEME-16 Cornerstone - loading of thumbnail image delayed on cart page #1925

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1b899ba
fix(storefront): BCTHEME-16 Cornerstone - loading of thumbnail image …
yurytut1993 Dec 10, 2020
09e2d5a
Merge branch 'master' into BCTHEME-16
yurytut1993 Jan 5, 2021
711f575
Merge branch 'master' into BCTHEME-16
BC-tymurbiedukhin Jan 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Changelog

## Draft
- Cornerstone - loading of thumbnail image delayed on cart page . [#1925](https://github.com/bigcommerce/cornerstone/pull/1925)
- Parse HTML entities in jsContext. [#1917](https://github.com/bigcommerce/cornerstone/pull/1917)
- Product images squashed in Category view in AMP. [#1921](https://github.com/bigcommerce/cornerstone/pull/1921)
- Fixed misaligned tooltip for required product option. [#1915](https://github.com/bigcommerce/cornerstone/pull/1915)
Expand Down
2 changes: 1 addition & 1 deletion templates/components/cart/content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
image=image
class="cart-item-image"
fallback_size=../theme_settings.productthumb_size
lazyload='disabled'
Copy link
Contributor Author

@yurytut1993 yurytut1993 Dec 17, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @bookernath! Need your review. We use disabled value for lazyload and because of that lazyload class is not setting to responsive-img component. Because of that lazysizes library ignores images from cart list. This lib is responsive to set size attribute to the image to help browser decide which url he should use to load the images. As we have no sizes here, browser chose url from srcset due to viewport (screen size in this case) and loading to big images. Because of loading full size images we have delay on its loading. Any major reasons to use disabled here or we can just use ../theme_settings.lazyload_mode, as we using it for such type of images in similar entities (cart preview list and account order list)?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My reason for disabling here was mostly because the Cart page does not have much other content in terms of images, and the cart images are above-the-fold high priority content. So this was a small optimization for user experience, to avoid delaying the loading of these key images.

However, I am fine with this change if it fixes a problem. 👍

lazyload=../theme_settings.lazyload_mode
default_image=../theme_settings.default_image_product
}}
{{/if}}
Expand Down