1

これは、昨日私が尋ねた質問の続きであり、この質問から派生したものです。

基本的に、私はjqueryを使用してページのスクロール時にcssの背景画像を変更していますが、最初の訪問時に、スクロール時に背景が変更されると、ロードが開始され、ユーザーエクスペリエンスが低下します。

これが一度だけ発生するようにキャッシュヘッダーを使用していますが、まったく発生しなければいいのですが。

ページがスクロールする前に 2 番目の CSS 画像を読み込んで遷移をシームレスにするにはどうすればよいですか?

この1つの画像をバックグラウンドでロードしようとしているだけで、表示前などにページ上のすべての画像をプリロードするのではありません...

私が使用している現在のコード...

jquery

jQuery(window).scroll(function(){
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = jQuery(window).scrollTop();
if(scrolledFromtop > fromTopPx){
    jQuery('html').addClass('scrolled');
}else{
    jQuery('html').removeClass('scrolled');
}
});

CSS

html {
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

html {
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}

html.scrolled {
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg);
}

デモ- スクロールして動作を確認します。

4

3 に答える 3

1

ここにいくつかのオプションがあります:

  1. 非表示の要素を追加し、画像を背景として追加します。ブラウザはそれをロードし、リロードする必要がないことを知るのに十分スマートです

  2. 私がよりクリーンな方法と考えるもの：最初の画像の後ろに2番目の画像をロードします：

html {
    background-image: url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg),
                      url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg);
}

html.scrolled {
    background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}
于 2013-07-12T03:29:46.863 に答える
0

もう1つのオプションは、単一のスプライトで画像を作成し、位置を変更して表示することです..この方法では、余分なhttp呼び出し自体を1つ節約できます。http://spritegen.website-performance.org/で画像スプライトを作成できます

于 2013-07-12T05:03:05.530 に答える