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 に答える