Preloading images via CSS


#23

The thing is, this was made to work with html images, not, CSS background images.

I should’ve made that clear from the start.

How would this code be made to work with CSS background images instead of html images.

function preloader() {
	if (document.getElementById) {
		document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";
		document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";
		document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";
	}
}
function addLoadEvent(func) {
	const oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
		}
	}
}
addLoadEvent(preloader);

#24

If your question is about the JavaScript, then you need to ask it in the JavaScript forum.

Surely background images are loaded when the page loads anyway, and therefore don’t need to be preloaded?


#25

It’s only the CSS part inside the javascript that needs to be fixed.

It’s not the javascript code itself.

.style.background = "url(https://i.imgur.com/fOfpsiC.png) no-repeat -999em -9999em";

I would need to add all of this into it.

body:after {
  content: "";
  position: absolute;
  left: -999em;
  top: -999em;
  z-index: -1;

I don’t think this is right:
.style.background = "url(https://i.imgur.com/fOfpsiC.png) no-repeat -999em -9999em body:after content: "" position: absolute z-index: -1;


#26

You don’t need any js unless you want to lazy load and that old script does not do that anyway. The css I gave you will preload the images on its own.

I’m out today so can’t reply until much later :slight_smile:


#27

Why on earth would you want to add the css via js instead of normally in the css? You are just using JS to add CSS. Add the background images to the css rule and forget the JS.

If you want to ‘lazyload’ the images then you will need js but you will need some special JS that waits for all elements on the page to load and display and then once that has happened it will load the extra images afterwards -this is called lazy loading. Lazy loading is useful for images that are not to be shown initially when the page is loaded but might be called for later on (as in a rollover or hide and show).

The css version will load the images on page load and therefore may slow the initial page render down a little. (In html5 you can now add style tags inside the body element and although I dislike this it does mean that you can add a style tag before the closing body element and insert the css for the images and then they will get rendered last and not hold the page up.)


#29

How would this way be done?

The css version will load the images on page load and therefore may slow the initial page render down a little. (In html5 you can now add style tags inside the body element and although I dislike this it does mean that you can add a style tag before the closing body element and insert the css for the images and then they will get rendered last and not hold the page up.)


#30

Paul has given you the instructions for using the CSS version. Go back and reread them, and if there is something you don’t understand, then ask.


#31

This part particularly:

you can add a style tag before the closing body element and insert the css for the images


#32

That seems quite straightforward to me.

Normally you would have the CSS in a separate style sheet, or between <style></style> tags in the <head> of the document. Paul is suggesting putting the rules for these images into <style></style> tags just before the closing </body> tag instead.


#33

Put this into the html
just before the closing </body>

I did that here:
https://test2codes.blogspot.com/

On 1st page load:
Cleared the cache from the browser before I did each one.

563 ms
600 ms
634 ms
727 ms
687 ms
640 ms
703 ms
641 ms
594 ms
637 ms

Now I’ll put it back in the CSS to see if there’s a difference.
These are the numbers I got:

703 ms
698 ms
590 ms
915 ms
966 ms
791 ms
690 ms
696 ms
822 ms
851 ms

250 ms no preload added.

<style>
body:after {
  content: "";
  position: absolute;
  left: -999em;
  top: -999em;
  z-index: -1;
  background: url(https://i.imgur.com/fOfpsiC.png) no-repeat 0 0, url(https://i.imgur.com/92kMrMf.jpg) no-repeat 0 0, url(https://i.imgur.com/WzHsnG7.png) no-repeat 0 0, url(https://i.imgur.com/96Q10GA.png) no-repeat 0 0, url(https://i.imgur.com/UzRn6Qx.png) no-repeat 0 0, url(https://i.imgur.com/1TbGgqz.png) no-repeat 0 0, url(https://i.imgur.com/AJDZEOX.jpg) no-repeat 0 0;
}
</style>

#34

You will have to explain what the results represent to you and what you are trying to do exactly?

By putting the style block at the end next to the closing body tag you are delaying when those extra images load and thus you do not block the rest of the document from loading. It does not mean the page will load any quicker overall because you still have to eventually load all the resources and indeed the extra style tag and css will add a little to overall timings. You are just changing the order in which things load. i.e. you can see the page before those extra images have needed to load.

If you place the image code in the CSS in the head then it becomes render-blocking and loads all the relevant styles before getting on with anything else (in a simplified explanation as its likely way more complicated than that). i.e. those extra images are loaded at the same time as the rest of the css and therefore the displayed page will take a little longer to be seen.

I’m a little confused now as to what you are trying to achieve?

Pre-loading images doesn’t speed the loading up it just makes sure that images that are required later on are ready to be seen immediately when requested. They still have to load whatever. It avoids a slight delay when you rollover an image to show a different image or if you do hide and show content as in your case. Usually when you reveal something the browser suddenly sees you want an image and goes and loads it. Pre-loading avoids that problem but has nothing to do with initial page load time as such although there may be slight implications.

Lazy-loading does much the same as above but chooses to load those extra images when nothing else is happening and thus does not interfere with the initial page at all (unless you were quick enough to click and load the image before the lazy-loading had happened).


#35

In addition to what PaulOB said, browsers have all kinds of performance tweaks to make pages load as fast as possible. Part of those tweaks may be identifying images that aren’t being rendered and not downloading them immediately so to draw the page in the browser as fast as possible. As browsers have evolved, this technique of drawing images off the screen may not even work any more if browsers are now smart enough to detect something isn’t visible so not bother to load the required file.

As I said above, the correct way to do this is <link rel="preload"> or the corresponding HTTP header.


#36

I had tried that way here, it’s not working.
https://testblogerlayout.blogspot.com/

<head>
<link as='image' href='https://i.imgur.com/Y0CrMX2.png' rel='preload'/>
</head>

The image isn’t being cached in the browser:

or the corresponding HTTP header.

How would I try it that way?


#37

Your a Firefox user, right?
No default support in FF at this time…

https://caniuse.com/#feat=link-rel-preload

Disabled by default behind the network.preload flag.

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#Browser_compatibility

An improved version that works for non-cacheable resources is expected to land soon.


#38

I have both installed, to make sure things work properly on both, but prefer firefox.

But I see it working on Chrome, just not firefox.


#39

If that way only works in about 20% of the browsers, then what should be used?

What did you mean by

or the corresponding HTTP header.

How would that way have been set up?


#40

You mean 80% I think?


#41

I guess, no, I had read somewhere, someone said 20%, so I just assumed that number.

Is that 80%
or 20%
https://caniuse.com/#feat=link-rel-preload

10 are not Green,
8 are Green.


#42

I believe you also need to configure your server, it’s not as simple as <link rel="preload">

I’m not sure the header would work in FF either since it still uses rel=preload;

A good article to read here…


#43

There is no server, because it’s blogger, everything is controlled by google.