Cards with lazy loading images

[cloewen8]

Description

If an element is appended that includes an img with the loading="lazy" attribute. All cards will fail to be laid out. Optimally these elements should be appended and positioned as if they did not have the image (optionally with the width and height applied ahead of time), then re-positioned when the image loads at a later point.

Steps to check or reproduce

This can be reproduced using any grid with images:

1. Navigate to https://codepen.io/pen/?&editable=true=https%3A%2F%2Fnaver.github.io%2Fegjs-infinitegrid%2Fassets%2Fhtml%2Fgrid.html
2. In the JS section, change (line 1)

var template = '<div class="item"><div class="thumbnail"><img src="${link}../../assets/image/${no}.jpg"></div><div class="info">${text}</div></div>';

to (adding loading="lazy")

var template = '<div class="item"><div class="thumbnail"><img loading="lazy" src="${link}../../assets/image/${no}.jpg"></div><div class="info">${text}</div></div>';

[daybrush]

@cloewen8

Thank you. Native image lazy loading has not yet been applied. We will add it later.

[stale]

This issue/PR has been automatically marked as stale because it has not had any update (including commits, comments, labels, milestones, etc) for 30 days. It will be closed automatically if no further update occurs in 7 day. Thank you for your contributions!

한글

이 이슈/PR은 commits, comments, labels, milestones 등 30일간 활동이 없어 자동으로 stale 상태로 전환되었습니다. 이후 7일간 활동이 없다면 자동으로 닫힐 예정입니다. 프로젝트 개선에 기여해주셔서 감사합니다.

[cloewen8]

No updates, but also not resolved. Just patient waiting here.

[daybrush]

@cloewen8

Sorry for the long wait. I am going to start working. I plan to release it with another PR.

[cloewen8]

No worries. I consider lazy loading to be more of a nicity then a requirement.

[daybrush]

@cloewen8

@egjs/infinitegrid 3.7.0 is released. Try it.

[cloewen8]

Works on my machine. I have it queued up to test on a production website later tonight, I'll let you know if I encounter any problems.

[cloewen8]

Works great!