Image laoding shifts text position temporarily

The site has a full width header slideshow with a text tagline centered on the slideshow.
In my local development environment the slideshow images and tagline load simultaneously.
On a remote server the tagline loads first while the images are down loading. This causes the tagline to be pushed up to the top of the browser. When the slideshow images complete down loading the tagline positions correctly. I have try adding height:auto to the tagline container to fix the tagline positioning but it is not working.

What is the technique to deal with this text and image positioning issue when the image loading time temporarily shifts the text tagline position?

Do your images have the height/width attributes in the HTML? That preserves the space while the browser downloads the images.

1 Like

no, the site is a responsive site which uses the image with 100%.

Set the width/height attributes in the HTML (not the CSS).

The image size changes depending on the viewport size. Is there an alternative method to preserve the image height?

You can set the original/true width and height attributes of the image in the html as Ryan suggests and then the browser will know what size it will need to be resized to when you over-ride it with your css e.g. img.name(width:100%;height:auto)

It’s not foolproof but often gives better performance this way

Without the attributes present the browser will have to wait until the image is loaded before it can make a decision on what size it needs to be resized to. .

1 Like

The slideshow uses the picture element and srcset. How would I apply the image height and with and still keep the slideshow responsive?

Example of slideshow image syntax,

<picture>
  <source srcset="images/slideshow/S8G9616_4-xlarge.jpg" media="(min-width: 1400px)">
  <source srcset="images/slideshow/S8G9616_4-large.jpg" media="(min-width: 880px)">
    <source srcset="images/slideshoz_S8G9616_4-small.jpg" media="(max-width: 478px)">
    <source srcset="images/slideshow/S8G9616_4-medium.jpg">
    <!-- fall back -->
    <img src="images/slideshow/S8G9616_4-medium.jpg" alt="">
</picture>

Now you tell us :smile:

I believe this reflow is one of the problems with the picture element. It’s talked about in detail here but everyone seems to want to ignore it.

I’d have to see your working page to see if there’s anything that can be done. Is it a fluid site or various fixed widths? You may be able to set the size in the css if its not fluid.

1 Like

Sorry for not clarifying the type of the responsive slide show. The site uses responsive design with fluid media. Here is a link to the page so that you can see the issue.
http://photoshopace.com/transfer/BA/072315/index.html

I noticed that when the four image slideshow is loading an empty space area is added to the end of the footer. When the slideshow finishes loading the empty cancels out.

Hi,

That isn’t working very well at all is it? The image doesn’t even stretch to my browser edge when I resize larger and only fits if I then refresh.

Your large image is 500k and I would never put an image that large on the web anyway. You really need to get that down by half.

It looks to me as though the picture element is a big fail on all fronts as you are making me load three images when I resize my browser instead of one single image. Combined with the delay in loading and not being able to fix the aspect ratio size so that space is preserved will put me off from using that method.

The only thing I can suggest is that you create an intrinsic aspect ratio wrapper to hold the page open and absolutely place your slideshow onto it. You can do this by creating a wrapper that has padding-top of 55% and is position:relative. Then just absolutely place your slideshow onto it to fit. The aspect ratio should match that of the image (830/1550 = 54% approx) and should hold the page open while the image loads; which will at least stop the page jumping and allow your tagline to move to the right position straight away.

I’m afraid I can’t think of anything else as the picture element is only just starting to be used and no one really knows how it will work in real life. It seems to me though that is is a flawed approach once again. Of course there may be ways to get around the loading problem but from the link I gave above it seems to be a common problem.

Optimising your images may also minimise the problem as I would never go above 300k for an image.

Can you send me a screen shot of how you experience the slide show please? I will reconsider the slideshow and look for an alternative method to do a responsive slideshow.

Hi,

You seem to have changed the routine now but here are some screenshots in chrome and Firefox at various widths.

The caption seems to be giving you problems and you might be better utilising the method shown here in my codepen. Of course that may not be easy to implement in the confines of your slideshow.

Thanks for you help. I was able to fix the reflow issue by adding the property overflow:hidden to the slideshow container. This prevents the headline moving to the top while the images are loading. The image load time remains slow tho. I try the responsive slides plugin which fixed the reflow and improved the image load time significantly. However the images load in layers which does not look good. First layer black and white ,subsequent layers color data, final layer sharpness.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.