Content reflow using cloudimage lazyload
hamilton-seguin opened this issue · 9 comments
hamilton-seguin commented
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 commented
hey @VoyageinStyle ,
can u pls record a small video with the problem to understand the problem fully. Thx
hamilton-seguin commented
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 ***@***.***> 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
<#9?email_source=notifications&email_token=AMA54UMLHXKBAFZNEWAIKHLQ6FNCPA5CNFSM4KICRQZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJGZL5A#issuecomment-575510004>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AMA54UPSNTTPHZBSOBQX24LQ6FNCPANCNFSM4KICRQZA>
.
hamilton-seguin commented
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 ***@***.***>
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
> <#9?email_source=notifications&email_token=AMA54UMLHXKBAFZNEWAIKHLQ6FNCPA5CNFSM4KICRQZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJGZL5A#issuecomment-575510004>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/AMA54UPSNTTPHZBSOBQX24LQ6FNCPANCNFSM4KICRQZA>
> .
>
dzmitry-stramavus commented
hey @VoyageinStyle ,
the problem is that you don't set ratio property.
https://github.com/scaleflex/js-cloudimage-responsive#img-tag
hamilton-seguin commented
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 <img> 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 ***@***.***> 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
<#9?email_source=notifications&email_token=AMA54UKZB2H4RZJK57KDXNTQ73CS5A5CNFSM4KICRQZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJ7HCGY#issuecomment-578711835>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AMA54UL4UULS4ORLZ7ZNKPLQ73CS5ANCNFSM4KICRQZA>
.
dzmitry-stramavus commented
@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 commented
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:
<figure class="wp-block-image size-large">
<img ci-src="
https://voyageinstyle.net/wp-content/uploads/2020/01/Galle-tuktuk-1024x685.jpg
" ci-ratio="1.5" alt=""
class="wp-image-7374"/>
</figure>
This is what I get for the gallery (vertical) image block:
<figure class="wp-block-gallery columns-2 is-cropped">
<ul class="blocks-gallery-grid">
<li class="blocks-gallery-item">
<figure>
<img ci-src="
https://voyageinstyle.net/wp-content/uploads/2020/01unawatuna-villa2-710x1024.jpg"
ci-ratio="1.5"
alt="" data-id="7297" data-full-url="
https://voyageinstyle.netwp-content/uploads/2020/01unawatuna-villa2-scaled.jpg
"
data-link="https://voyageinstyle.net/unawatuna-villa2/" class=
"wp-image-7297"/>
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<img ci-src="https:/
voyageinstyle.net/wp-content/uploads/2020/01Mirissa-beach-scaled-e1579162640102-844x1024.jpg
"
ci-ratio="1.5" alt="" data-id="7398"
data-full-url="
https://voyageinstyle.net/wp-content/uploads/202001Mirissa-beach-scaled-e1579162640102.jpg
"
data-link="https://voyageinstyle.net/mirissa-beach"class="wp-image-7398"/>
</figure>
</li>
</ul>
</figure>
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 ***@***.***> 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
<#9?email_source=notifications&email_token=AMA54UKNEJF5FZAZYEEOTBLQ77K5DA5CNFSM4KICRQZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKCIPLI#issuecomment-579110829>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AMA54ULFV6L75R2DOAKEPELQ77K5DANCNFSM4KICRQZA>
.
hamilton-seguin commented
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 *<style>* that is applied by
ciResponsive JS to the class:
img.ci-image-ratio {
1. position: absolute;
2.
When I unclick this position: absolute value, the image appear on the page,
but then the "appearance" of the images on the article is totally fucked
By tweaking the *padding-bottom* of the div
*class="ci-image-wrapper-ratio" * also applied by the JS, to 0..
...
Problem fixed update:
Ok Sorry for all that, managed to fix the issue. Idk if it is an actual
issue, or just my CSS overriding yours in a weird way because of the new
version.
But anyways i had to change the css for the -*ratio* basically
.ci-image-wrapper-ratio {
padding-bottom: 0 !important;
}
.ci-image-ratio {
position: initial !important;
}
Always seems to be impossible to fix until you find the culprit and with a
trial by error.. find the problem..
Anyways sorry for wasting your time if I did, thanks for your help.
And now I have to find how to change the placeholder image :D
Thx Dmitry ;)
…dzmitry-stramavus commented
@VoyageinStyle ok, cool. Happy Coding!