Menu
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!
843
While <img> tags are the most common way of using images on web pages, images can also be invoked via the CSS background-image property (and other properties). Browser-level lazy-loading does not apply to CSS background images, so you need to consider other methods if you have background images to lazy-load.
Whenever you load large image on the page and it's taken too much time, that time you can show loading image or you can say Placeholder image ( Html Image Placeholder ) within the same image tag. You can do this simply by using CSS. Use background property of css and set url of an loading image.
To add an image from our Photo Library, select the “Image Placeholder” and click on the “Photos” tab to search for an image. The desired image will be automatically added by simply clicking on it.
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.
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
