Welcome, Guest

Lazy Load image-text overlapping
(1 viewing) (1) Guest
  • Page:
  • 1

TOPIC: Lazy Load image-text overlapping

Lazy Load image-text overlapping 1 year, 10 months ago #27558

Hi guys,

thanks for this wonderful plugin, but there is one problem.
Since the image loads after scrolling down the page, the left aligned images are showing over the text.
You could see this bug even in your blog.

I'm attaching screenshot of the problem.

Hope there will be some kind of fix for this

Regards,
Yuriy
lazyload.jpg
  • Trimud
  • ( User )
  • OFFLINE
  • Free Extensions
  • Posts: 7
  • Karma: 0
Last Edit: 1 year, 10 months ago by Trimud.

Re: Lazy Load image-text overlapping 1 year, 10 months ago #27564

Hi there Yuriy,

That was actually a bug in my css that I sorted a few days ago.

Can you point to where its happening for you?

Anthony
  • Anthony Olsen
  • ( Admin )
  • NOW ONLINE
  • Moderator
  • Posts: 17254
  • Karma: 317
Creative Unique Minimal Joomla Templates

Re: Lazy Load image-text overlapping 1 year, 10 months ago #27576

Hi Anthony,

thanks for the quick replay.

You could take a look here for example: k2.webcreato.com/index.php
Text is over the images and images captions are not long enough.

Also the screenshot from the previous post is still actual on every single K2 page on this site

Best Regards,
Yuriy
  • Trimud
  • ( User )
  • OFFLINE
  • Free Extensions
  • Posts: 7
  • Karma: 0
Last Edit: 1 year, 10 months ago by Trimud.

Re: Lazy Load image-text overlapping 1 year, 10 months ago #27579

For the errors on the JB site is it only in firefox and does it disappear if you click refresh? I just saw it and then refreshed and it had gone so I wonder if its a cache issue.

I cant actually see it happening on your site at the moment.

Can you perhaps post a screenshot of it on your site?

Thanks Anthony
  • Anthony Olsen
  • ( Admin )
  • NOW ONLINE
  • Moderator
  • Posts: 17254
  • Karma: 317
Creative Unique Minimal Joomla Templates

Re: Lazy Load image-text overlapping 1 year, 10 months ago #27581

Yes, I'm attaching the screenshot.

If you are on the same row when reloading the page the image will show up correctly, because the script doesn't start.
But if you are in the beginning of the page and scroll down you will see the problem.
issue.jpg
  • Trimud
  • ( User )
  • OFFLINE
  • Free Extensions
  • Posts: 7
  • Karma: 0

Re: Lazy Load image-text overlapping 1 year, 10 months ago #27583

Hey Yuri,

Not sure of a fix for this but it seems to be occurring because the div (div.image_caption) wrapping the image has an explicit width which comes from the caption and it is a lot smaller than the image.
Maybe if changing the markup around by pulling the image outside and floating it, or being able to increase the width there might help.

Cheers,
Jason.
  • Jason D
  • ( Admin )
  • OFFLINE
  • 12 Month Developer
  • Posts: 2947
  • Karma: 75

Re: Lazy Load image-text overlapping 1 year, 10 months ago #27588

Hi Jason,

the problem comes after installing the plugin.
I know that caption.js gives width of the images, but since the image doesn't load initially, before the caption.js is loaded it breaks the width of div.caption.

There is no problem if the image or the surrounding div is not left aligned (or floated) or if there is a clearing element before the text. Something like that:

Broken:
<img src="" align="left" />Text text text


Working solution:
<img src="" align="left" /><br />
Text text text


I know this shouldn't be like that and maybe there is a way to catch the real width and all paddings and margins of the image before it loads when I scroll down.

Regards,
Yuriy
  • Trimud
  • ( User )
  • OFFLINE
  • Free Extensions
  • Posts: 7
  • Karma: 0
Last Edit: 1 year, 10 months ago by Trimud.

Re: Lazy Load image-text overlapping 1 year, 10 months ago #27593

Ah I think I see whats happening here now.

I think you need to specify the height and width for the image via an inline style. If you use JCE it does this for you anyway and its certainly recommended from an accessibility and seo point of view.

Let us know if that fixes it.

Anthony
  • Anthony Olsen
  • ( Admin )
  • NOW ONLINE
  • Moderator
  • Posts: 17254
  • Karma: 317
Creative Unique Minimal Joomla Templates

Re: Lazy Load image-text overlapping 1 year, 10 months ago #27602

Sure,

I can do this and it works fine.

In the default T3 joomlart installation there is no width of the pictures, that's why I saw the problem.

Of course I will spend more time investigating the problem on my next project to see if it broke on some other place.
BTW: The user section here: k2.webcreato.com/index.php?option=com_k2...omladay-hungary-2009 works fine unlikely your blog posts as I mentioned in the first post.

Thanks for the great support.
Yuriy
  • Trimud
  • ( User )
  • OFFLINE
  • Free Extensions
  • Posts: 7
  • Karma: 0
Last Edit: 1 year, 10 months ago by Trimud.

Re: Lazy Load image-text overlapping 1 year, 10 months ago #27615

Cool - just to confirm are you still seeing it on the blog? I cant replicate here now

Anthony
  • Anthony Olsen
  • ( Admin )
  • NOW ONLINE
  • Moderator
  • Posts: 17254
  • Karma: 317
Creative Unique Minimal Joomla Templates

Re: Lazy Load image-text overlapping 1 year, 10 months ago #27621

No, the bug still stands.
See attached screenshot. It is when I scroll down and the image is not yet loaded.

This bug is only reproducible in Firefox 3.5.10 and 3.6.6 with small differences.

Chrome, Opera, Safari, IE7, even IE6 is ok
bamboo-20100630.jpg
  • Trimud
  • ( User )
  • OFFLINE
  • Free Extensions
  • Posts: 7
  • Karma: 0
Last Edit: 1 year, 10 months ago by Trimud.

Re: Lazy Load image-text overlapping 1 year, 10 months ago #27655

Ah ok - I think its the same issue. I just specified the width and height in the k2 template.

Still cant seem to replicate it here but I think its fixed now anyway.

Cheers Anthony
  • Anthony Olsen
  • ( Admin )
  • NOW ONLINE
  • Moderator
  • Posts: 17254
  • Karma: 317
Creative Unique Minimal Joomla Templates

Re: Lazy Load image-text overlapping 1 year, 10 months ago #27678

Well, not really fixed, but it is not a big deal after all

Of course, you can play a little bit with float: left and clear: both on some elements but only if You are able to see the bug
  • Trimud
  • ( User )
  • OFFLINE
  • Free Extensions
  • Posts: 7
  • Karma: 0

Re: Lazy Load image-text overlapping 1 year, 10 months ago #27697

Hehe that would help.

Ill do some more investigating but as you say its a small thing.

Cheers Anthony
  • Anthony Olsen
  • ( Admin )
  • NOW ONLINE
  • Moderator
  • Posts: 17254
  • Karma: 317
Creative Unique Minimal Joomla Templates
  • Page:
  • 1
Time to create page: 1.31 seconds