How to load body background image after page loads(after load all site images) fully?

Question

I want to load body background image for my website. It is very large size so it takes long time to load my page. So I want to load body background image after getting page fully loaded.

I tried javascript window.onload but it doesn't help.

Answer 1

If you are using jQuery, you could do this ( http://api.jquery.com/ready/ ):

JS:

$(document).ready(function() {
    $('body').addClass('large-background');
});

CSS:

.large-background {
    background: url('../img/large-image.jpg') no-repeat;
}

Answer 2

Try something like this - remove the src attribute from the image first:

$(function() {
   $('img#bg').attr('src', 'images/myImage.jpg');
});

Answer 3

将正文背景放在页面底部的样式标签中。

<style type='text/css'>body{background-image:url("/images/bgimage.gif")}</style>

Answer 4

I have made a script for my carousel with Jquery:

1. Count all divs with class [classname]

2. Get each div data-src

3. Set for each div - style (background)

    $(document).ready(function(){ var numBackground = $('.main-view-carosel').length /*amount of divs with class*/ console.log(numBackground);/*view the lenth*/ setTimeout(function(){ /*set time out if needs to see ho it works*/ for (let i = 0; i < numBackground; i++ ){ /*set the maximal [i] amount of existing elements*/ var elements = document.getElementsByClassName('main-view- carosel');//get el with needed classname var requiredElement = elements[i]; /*get first one, second, third, etc [i]*/ var image = $(requiredElement).attr("data-src")/*get this div data-src*/ console.log(image);/*view in console this data-src*/ requiredElement.style.backgroundImage = "url(" + image + ")";/*set background for current div*/ } }, 100); });