Content reflow using cloudimage lazyload

[hamilton-seguin]

Hi,

I'd like to know if there is any way to prevent content reflow after lazyloaded images appears with cloudimage?

How could I fix that issue with CSS or a JS?

Thank you

[dzmitry-stramavus]

hey @VoyageinStyle ,

can u pls record a small video with the problem to understand the problem fully. Thx

[hamilton-seguin]

Screen Recording 2020-01-18 at 12.22.52.mov https://drive.google.com/file/d/1hLYR06Aqy0As6CgOJx4tb5Fhh4Rt2osV/view?usp=drive_web Hi, Thank you for your quick response!

So to clarify a bit my problem, it is mainly due to the "scroll-behavior: smooth;" property of my CSS I would like to fix the problem instead of just using the quick fix just changing it to auto which would help a bit.

Anyways so when the browser jumps to a location determined by an anchor that I put somewhere, it jumps and slide over all the pictures of my articles that have not been loaded yet because of the Lazyload to reach the anchor. But this causes all the pictures to load and change the "size of the article" (sorry for my lack of proper technical words).

How can I assign or preset a placeholder space for the pictures in the article before they load. This would mean that scrolling down before the pictures load (for example if the internet connection is bad) would not cause movement in the page for the reader.

Hope it is clearer now!

Tahnk you ever so much for your assistance

Voyage in Style

On Fri, Jan 17, 2020 at 6:30 PM Dmitry Stremous notifications@github.com wrote:

hey @VoyageinStyle https://github.com/VoyageinStyle ,

can u pls record a small video with the problem to understand the problem fully. Thx

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/scaleflex/js-cloudimage-responsive/issues/9?email_source=notifications&email_token=AMA54UMLHXKBAFZNEWAIKHLQ6FNCPA5CNFSM4KICRQZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJGZL5A#issuecomment-575510004, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMA54UPSNTTPHZBSOBQX24LQ6FNCPANCNFSM4KICRQZA .

[hamilton-seguin]

also, the pictures don't (really) have the same size always. There's a maximal height, but as the viewport changes from computer to mobile the picture will be resized. You can experience the problem yourself if you wish on: https://voyageinstyle.net/sri-lanka/unawatuna-guide-relax-days-on-the-beach/ https://voyageinstyle.net/sri-lanka/unawatuna-guide-relax-days-on-the-beach/#stay https://voyageinstyle.net/sri-lanka/unawatuna-guide-relax-days-on-the-beach/#stay the 2nd will go directly to the bottom (and will end up somewhere random in the page)

thanks

On Sat, Jan 18, 2020 at 12:40 PM Hamilton Seguin hamilton.seguin@gmail.com wrote:

Screen Recording 2020-01-18 at 12.22.52.mov https://drive.google.com/file/d/1hLYR06Aqy0As6CgOJx4tb5Fhh4Rt2osV/view?usp=drive_web Hi, Thank you for your quick response!

So to clarify a bit my problem, it is mainly due to the "scroll-behavior: smooth;" property of my CSS I would like to fix the problem instead of just using the quick fix just changing it to auto which would help a bit.

Anyways so when the browser jumps to a location determined by an anchor that I put somewhere, it jumps and slide over all the pictures of my articles that have not been loaded yet because of the Lazyload to reach the anchor. But this causes all the pictures to load and change the "size of the article" (sorry for my lack of proper technical words).

How can I assign or preset a placeholder space for the pictures in the article before they load. This would mean that scrolling down before the pictures load (for example if the internet connection is bad) would not cause movement in the page for the reader.

Hope it is clearer now!

Tahnk you ever so much for your assistance

Voyage in Style

On Fri, Jan 17, 2020 at 6:30 PM Dmitry Stremous notifications@github.com wrote:

hey @VoyageinStyle https://github.com/VoyageinStyle ,

can u pls record a small video with the problem to understand the problem fully. Thx

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/scaleflex/js-cloudimage-responsive/issues/9?email_source=notifications&email_token=AMA54UMLHXKBAFZNEWAIKHLQ6FNCPA5CNFSM4KICRQZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJGZL5A#issuecomment-575510004, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMA54UPSNTTPHZBSOBQX24LQ6FNCPANCNFSM4KICRQZA .

[dzmitry-stramavus]

hey @VoyageinStyle ,

the problem is that you don't set ratio property.

https://github.com/scaleflex/js-cloudimage-responsive#img-tag

[hamilton-seguin]

Hi Dmitry,

Thank you for your answer.

As much as i've somehow totally missed this attribute.. and its note seems to describe my problem exactly... after adding it to a page to test if it would fix the problem, it unfortunately doesn't work or do anything. The page loads the same way, and before the picture starts to load, there is no image placeholder or the position is not held Before the loading.

Maybe its due to my properties? there is a max-height set for my images so that they always look the same (or at least don't get too big)

https://voyageinstyle.net/sri-lanka/unawatuna-guide-relax-days-on-the-beach/ I've added the ci-ratio="1.5" property to all the images of this page, if you want to check for yourself.

I've tried to load the page with "slow 3G" in the network tab of the inspector to confirm that it doesn't block a space before it starts loading.

Thank you for your time, appreciated

On Mon, Jan 27, 2020 at 10:46 PM Dmitry Stremous notifications@github.com wrote:

hey @VoyageinStyle https://github.com/VoyageinStyle ,

the problem is that you don't set ratio property.

https://github.com/scaleflex/js-cloudimage-responsive#img-tag

[image: image] https://user-images.githubusercontent.com/10708539/73172347-76b15400-410b-11ea-93bd-a85ac0035b1d.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/scaleflex/js-cloudimage-responsive/issues/9?email_source=notifications&email_token=AMA54UKZB2H4RZJK57KDXNTQ73CS5A5CNFSM4KICRQZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJ7HCGY#issuecomment-578711835, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMA54UL4UULS4ORLZ7ZNKPLQ73CS5ANCNFSM4KICRQZA .

[dzmitry-stramavus]

@VoyageinStyle ,

on your page you use 2.0.2 version of the plugin, and attribute ci-ratio was named differently. I suggest you to update to the last version 3.4.10 https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/3.4.10/js-cloudimage-responsive.min.js. Tell me if everything is fixed in new version, also remove other attributes as data-src and srcset to not mix things.

[hamilton-seguin]

hi Dmitry,

I've updated to the latest version as you recommended, using /3/ to be on the latest update until your version 4 ;) It absolutely fixed my jump problem ! Great thank you.

But now I have a different problem, and this one is a bit more serious than just user experience..

Half my images don't load!

All my horizontal images work without a problem, but for some reason the vertical ones don't load at all, and I can't pinpoint the issue. To put vertical pictures I use the "gallery" block from wordpress, and now all gallery pictures don't load..

Also you suggested to remove the data-src and srcset attributes from my img. Unfortunately, as much as this is what I get for a normal (horizontal) image block:

This is what I get for the gallery (vertical) image block:

The data-id, data-full-url and data-link just appear by default. Removing them from the block before loading the page does not fix the problem anyways

And in anycase, the srcset and data-src appear automatically when wordpress renders the web-browser page...

So I don't know what prevents cloudimage from loading those specific images ... :/

Please help ! :$

Thank you very much

On Tue, Jan 28, 2020 at 6:10 PM Dmitry Stremous notifications@github.com wrote:

@VoyageinStyle https://github.com/VoyageinStyle ,

on your page you use 2.0.2 version of the plugin, and attribute ci-ratio was named differently. I suggest you to update to the last version 3.4.10 https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/3.4.10/js-cloudimage-responsive.min.js. Tell me if everything is fixed in new version, also remove other attributes as data-src and srcset to not mix things.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/scaleflex/js-cloudimage-responsive/issues/9?email_source=notifications&email_token=AMA54UKNEJF5FZAZYEEOTBLQ77K5DA5CNFSM4KICRQZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKCIPLI#issuecomment-579110829, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMA54ULFV6L75R2DOAKEPELQ77K5DANCNFSM4KICRQZA .

[hamilton-seguin]

Quick update:

So as i'm trying to find out why the images don't appear, after inspecting the page i found that:

• The images do load, they are just not shown
• It seems to be a CSS problem

• the problem seems to come from a