如何在页面加载后(加载所有站点图像后)完全加载正文背景图像

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

本文关键字：加载 图像 背景 正文 站点      更新时间：2023-09-26

我想为我的网站加载正文背景图像。它是非常大的尺寸，所以它需要很长时间来加载我的页面。所以我想在页面完全加载后加载正文背景图像。

我尝试了javascript window.onload，但它没有帮助。

如果您正在使用jQuery，您可以这样做(http://api.jquery.com/ready/):

JS: 

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

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

尝试这样做-首先从图像中删除src属性:

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

将body背景放在页面末尾的样式标签中。

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

我用Jquery为我的carousel制作了一个脚本:

  1. 统计所有class为[classname]的div

  2. 获取每个div数据-src

  3. 设置每个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);
});
相关文章：