Menu
I've just finished creating an image upload feature and am a little disappointed.
Whilst visiting a page that contains one or more photos, I am experiencing:
Tedious load time (~0.5 secs).
Unaesthetic image loading (You can see the photo load from top to bottom).
My question is: How can I make sure the entire photo is loaded before presenting it to the user (I am trying to figure out a way to make sure the image is fully loaded before the body) without using Javascript?
Note: This question is assuming the photo is being loading from a folder cache in the same directory..
240
To preload responsive images, new attributes were recently added to the <link> element: imagesrcset and imagesizes . They are used with <link rel="preload"> and match the srcset and sizes syntax used in <img> element.
"Preloading" loads an image file into the users' computer memory so that it can be instantly accessed when needed. This is useful, for example, if you have a mouseover event and an image needs to change without any delay.
1. Progressive JPEG
To avoid the "top to bottom" loading of an image you may use "progressive jpeg" which renders a "blurred" version of the picture during it's loading instead of "top to bottom" : Ex. : http://blog.patrickmeenan.com/2013/06/progressive-jpegs-ftw.html
2. Embedded (encoded in base64)
If you really want to show images and the page at the same time you should encode them as base64 and include them in your page :
<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." alt="" /> You can do it via PHP or any server side script.
<img src="data:image/jpeg;base64,<?=base64encode(file_get_contents($file_path))?>" alt="" /> https://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support
3. Disguised as stylesheets (awful hack)
If you want to reaaaaally block rendering before images are loaded, you could double images in your page in a <link rel=stylesheet> tag in the <head> section of your page.
Browsers won't show the page until CSSs are loaded, even though your files are not CSS it will load and cache them, and once loaded the page will render and your images will be loaded from cache.
<html> <head> <link rel="stylesheet" href="your_image_01.jpg" /> <link rel="stylesheet" href="your_image_02.jpg" /> </head> <body> ... <img src="your_image_01.jpg" alt="" /> ... <img src="your_image_02.jpg" alt="" /> ... </body> </html> I don't think you can do it without javascript.
Partial workaround is load all images in the first page opened by the user so all images are saved into the cache, but the right way to do it is use javascript.
Why don't you want to use javascript?
42
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
