search

fhrf / fhrf.github.io

The official website of Human Rights NGO - First Human Rights Foundation
https://fhrf.in
3 stars 15 forks source link

lazy load images in events page #4

Closed cTxplorer closed 4 years ago

cTxplorer commented 4 years ago

On events page, there are more than 150 event images.

They are all loaded at once; amounting to a size of 17MB.

There should be some lady loading mechanism, by which images are fetched as and when a user scrolls near to image.

In case you are unfamiliar, here's a css-tricks' guide to lazy loading.

Feel free to try and experiment with a solution that you think will work :)

qwerty-rgb commented 4 years ago

i will do it assign me please

cTxplorer commented 4 years ago

Alright, assigning this to you, @qwerty-rgb Let me know if you face any difficulty :)

qwerty-rgb commented 4 years ago

@cTxplorer i went through some material on the internet but have not yet got a fair amount of knowledge what to do I only got to know that it helps to load the webpages faster and efficient can u reccomend some things

cTxplorer commented 4 years ago

Hey @qwerty-rgb, great work researching the web.

as per my current understanding from [this article](browser-level lazy-loading), there are two ways (both javascript) to lazy load images; using event handles (like a scroll) or using intersection observer API (which tells us if an element is in view or not).

However, browsers have now rolled out native-support for lazy loading, since this is essential functionality. There's a new loading attribute which can we used to leverage lazy-loading. Check out this web.dev article

Though, it has supported only in recent browser versions. We can still utilize it rather than adding scroll handlers.

cTxplorer commented 4 years ago

@qwerty-rgb any progress/blocker on this? Are you still looking into this?