10

I have a question regarding the image loading style as shown on http://www.e-flux.com. This website first loads an image of a certain pattern (randomly) before proceeding to display the actual image. My guess is that this is to have visually pleasing content before even having loaded the total website.

I have looked at the source code and I saw that it had a class of "lazy is-loading". I think it has to do something with that.

I'd like to replicate this effect and did some research, about progressive images and such. Also, this website: 'css-tricks.com the-blur-up-technique-for-loading-background-images/' explains about loading a small image first and blur it to keep loading times low until the actual image has been downloaded.

But I can't seem to find how they did this trick at http://www.e-flux.com.

All info is appreciated!

GillSans
  • 101
  • 1
  • 4
  • you use the image tag with your placeholder as the source and then use js to change the src on load. this is so that all images use the same source (meaning less requests - 1 instead of how ever many images you have; whilst the page loads causing a better page load speed) – Pete Nov 22 '16 at 16:21
  • you can set the loading image into the background of img, it will be seen untill img source is loaded – G-Cyrillus Nov 22 '16 at 16:23
  • Sorry wasn't able to look at the site to see they were using a background image as their placeholder, you could do that too and then insert the image on top when the page loads - same result as just changing the image source – Pete Nov 22 '16 at 16:29
  • example from my comment http://codepen.io/anon/pen/bBWVoe just mind that attributes width and height are to be used or size set in css , else img tag will have no size until infos are loaded from the file. ... – G-Cyrillus Nov 22 '16 at 16:30
  • Thanks, this makes a lot of sense. The solution is actually pretty smart and easier as I expected. Thanks a lot, I'm going to try this! – GillSans Nov 22 '16 at 16:45

3 Answers3

6

Sometimes the CSS background-image is not desired. You could also use a simple inline javascript for this purpose, a disadvantage is that the placeholder image has to load first and correctly. However, this is usually not an issue, as the placeholder image will be faster to load in the first place, and may already be in cache.

For example:

<img src="placeholder.jpg" data-src="my-image.jpg" onload="if(this.src !== this.getAttribute('data-src')) this.src=this.getAttribute('data-src');">

This works because the browser will typically leave the currently displayed image in view until the new image has loaded.

It might not be a perfect solution, but it is simple, fairly readable, and easy to implement.

Yeti
  • 2,647
  • 2
  • 33
  • 37
  • Would this cater to the time where original image is being loaded? Cos onload would fire for the placeholder image. – Pavan Jul 17 '20 at 13:54
5

Old question but doesn't have a selected answer.

I'm working on the same thing, and something simple I'm trying is as follows:

<img style="background-image: url('MYIMAGE.svg');" src="MYIMAGE.jpg" width="500">

the .svg is a very small file and thus loads almost instantly. Then, the .jpg pops in when it's done. I literally have no other code - trying to keep it simple.

Coltuxumab
  • 615
  • 5
  • 16
2

Looking at their source, its done using a background-image sprite, positioned on a div element - alongside the image that's eventually loaded..:

<div class="lazy-placeholder item-image-wrapper-bg6" style="width: 512px"></div>

and

.item-image-wrapper-bg6 {
    background-image: url(../elements/bg-6.gif?2);
    background-size: 85px;
}
Stuart
  • 6,630
  • 2
  • 24
  • 40