1

如何仅在加载后显示图像但页面的其余部分正常显示？在每个页面上我都有这样<html class"page-name">的东西，css如下html.page-name { background: url(images/page-name.jpg) no-repeat center center fixed; background-size: cover; }

我尝试将javascript作为$(window).load(function(){ $('html').fadeIn(1500); });

但这显然不起作用，因为在加载图像之前，孔页是空白的。我希望在加载图像之前背景为黑色，然后将其替换为黑色背景。我还尝试$(window).load(function(){ $('html').addClass('page-title'); }); 了page-title类具有过渡效果但也不起作用的地方。

我如何实现这一点，具有黑色背景并在完全加载后将其替换为图像？

谢谢你。

4

2 回答 2

3

动态加载图像，然后在加载时将其添加到背景中

$(document).ready(function(){
    var img = new Image();
    img.onload = function(){
      // image  has been loaded
      $("html.page-name").css("background-image","url('"+image_url+"')");
    };
    img.src = image_url;
})
于 2013-08-08T07:25:53.880 回答
1

jQuery：

// Wait for page load
$(function() {
  // apply background image class to body (fade over 500 milliseconds)
  $('body').addClass('page-title', 500);
});

CSS：

.page-title {
   background-image: url('/path_to/image.jpg');
 }
于 2013-08-08T07:26:39.317 回答