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.)
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.)
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.
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).
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.
