Clever Geek Handbook

How to delay loading a large background image

How can I defer / defer the loading of a large background image? The reason I am asking this question is because I have a poor score for "first significant paint". When I run performance tests on the page. I tried to reduce the image size as much as possible.

+3


source to share


1 answer


If it is a background image you can use the Javascript onLoad event. This event is fired only after the entire page has finished loading.

Example:



function loadBGIMG(){
    document.getElementById("any-menu").style.backgroundImage="url(../images/any-menu.jpg)";
}
window.onload=loadBGIMG();
+1


source






More articles:


All Articles