1

I am currently building a portfolio website for myself. I have an array of projects that are flex and change size as the window changes size, once they get to a min-width they wrap over to the next line. My problem is that when the website is loaded for the first time without a cache, the images haven't loaded yet and the height of their container doesn't fit them. This causes a lot of overlap, but when the page is refreshed and there is a cache it fixes itself. An example is shown here: The cache problem.

My idea to fix this was to make a min-height, but since its responsive and the size of the container changes, I don't know how to set the min-height. I was thinking of setting it to a mathematical relation to the width of the view port window, but wasn't sure if I had the skills to make that work. I will happily attach the code if needed.

Joundill
  • 6,828
  • 12
  • 36
  • 50
Clayton Haight
  • 19
  • 2
  • Welcome to Stack Overflow! What code have you written already? Please have a read of [this guide on producing code for a good quality question](https://stackoverflow.com/help/minimal-reproducible-example), then include and mark up your code in your question. Cheers! – Joundill Aug 23 '20 at 23:47
  • `const img = document.createElement('img'); img.onload = function(){ let width = this.width, height = this.height; }; img.src = 'yourImg.png';`. Make sure the load comes before `.src` is assigned or it may never fire. – StackSlave Aug 23 '20 at 23:49
  • @StackSlave Thanks for the speedy reply. How would I implement this exactly? Should I link it to my image in my main css file? – Clayton Haight Aug 23 '20 at 23:54
  • How can anything be done with exactly no code? That was just how you can get image width and height. I have no idea what your site looks like. Honestly, there is probably a logical solution that makes more sense, but how do I know. You have posted no code. – StackSlave Aug 24 '20 at 00:13
  • Does this answer your question? [Responsive img without reflow](https://stackoverflow.com/questions/45869454/responsive-img-without-reflow) – FluffyKitten Aug 24 '20 at 01:03

2 Answers2

2

To make space for images before they load you need to give each image a corresponding value(*) of its height and width.

( * - in good coding practices, this is actually a requirement ! )

For example :: <img src=[url] width=180px height=300px>

If you want a fast, stable, responsive, robust and absolutely solid page - Never leave images, tables and table-cell columns without a 1. width and 2.height specs. Even if they are flexy, you are highly encouraged to at least use relative size (%).

<img src=[url] width=60% height=100%>  /*relative::Let's say this set of images is in a
 div who's css height is 300px. The images width given as 60% matches exactly its pixel 
 width, which is 180px.*/

You will immediately notice a tremendous improvement of your page performance and have away better experience working with them. Depending on the complexity of elements a ten fold improvement of the render speed may be achieved.

Bekim Bacaj
  • 5,707
  • 2
  • 24
  • 26
  • This did have an amazing improvement on page performence. It did fix the first row, but the following are the same. I am clueless why. Since each img now has a height, its container should and thus the formatting shouldn't screw up. How would I go about finding the root to this weird distortion? – Clayton Haight Aug 24 '20 at 00:51
  • @ClaytonHaight No this is the solution - page performance improvement is a bonus. We need to see the code. – Bekim Bacaj Aug 24 '20 at 21:10
0

If you want to preserve space for an existing image you can wrap it into a div and adjust this div's dimensions any way you like. For example, you can set min-height. Or if the image height varies you can use loading indicators (gif loading animations) with their own dimensions, and when your images finally load, you can replace the gifs with the actual images using js onload event

Vladimir Bakulin
  • 92
  • 8
  • Thats a great idea, but wouldn't I have the same problem because it would have to load the loading gif? Or since theyre all the same it would be super quick? – Clayton Haight Aug 23 '20 at 23:56
  • It depends on the gif size. Very often they are small enough to be loaded instantly, even with slow connection. You can also use image compression. By the way, these loading gifs can be placed inside divs with set min-height and centered respectively. And then the div height may be stretched down by the actual image if necessary – Vladimir Bakulin Aug 24 '20 at 00:33