Cards with lazy loading images

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

@egjs/infinitegrid 3.7.0 is released. Try it.

[cloewen8]

Works great!