1

ホバー状態の画像をプリロードして、数秒後ではなくすぐに背景を変更するにはどうすればよいですか。つまり、ユーザーが特定の要素にカーソルを合わせる前に背景を読み込む必要があります。

このサイトはhttp://www.paradisoperduto.co.uk/で見ることができます。

これまでのコーディングには非常に満足しているので、これを実装するために比較的簡単な変更があったかどうか疑問に思っていました. どうもありがとう。

<!-- background change -->
 <script type="text/javascript">
      $(document).ready(function() {
        $('#hoverarea').hover(function() {
            $('body').addClass('hover');
        }, function(){
            $('body').removeClass('hover');
        });
      });
    </script>

        <!-- background change-->


    <div id="hoverarea"><a href="comingsoon.html"> <img src="images/blank.png" onmouseover="playSound('audio/apple2.mp3');"> </a></div>

body {
    background-image:url('../images/blackandwhite.gif');
    background-position:50% 20px; 
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-color:black;
    height:714px;
    width:1024;
}

#hoverarea {
    position:absolute;
    width:400px;
    height:400px;
    top:300px;
    right:20px;
    z-index:2000; 
}



.hover {
    background-image:url('../images/colour.gif');

}


li a:hover + img {
    left: 0px;
}
4

2 に答える 2

0

大きな背景画像について言及していると思います。問題は、ページ上の要素が非常に少ないため、2 番目の画像がプリロードされる前であっても、ユーザーが画像にカーソルを合わせる可能性が高いことです。やっぱり大きいイメージです。

試すことができる 1 つのことは、CSS スプライトです。2 つの画像を 1 つの背の高い画像に結合して、すべてが 1 つの画像として読み込まれるという概念があります。次に、CSS で次のようにします。

#hoverarea {
  background-image: url('../images/backgroundimage.gif');
  background-position: center top;
}

#hoverarea:hover {
  background-position: center bottom;
}

この方法では、面倒な JavaScript ソリューションを使用して 2 番目の画像をプリロードして挿入するのではなく、1 つの画像の css 位置を変更するだけです。

于 2013-10-02T19:22:35.707 に答える
0

JavaScriptでこの画像を待つことができます - 私のサイトでは、ウェブサイトが表示される前にプリロードされる画像のURLを含む「キャッシュリスト」を使用しています - jsで新しい画像要素を作成し、この画像のsrcを与える場合、 onload イベントが発生するとき - ブラウザはこの画像をキャッシュするため、他の場所に表示されるとすぐに表示されます。ここに私のウェブサイトのコードがありますが、それがどのように機能するかは明らかだと思います:

function cache(input, prefix, primary, cback){
  this.cback = cback
  this.tab=[];
  var tmp = input;
  var cur;
  for (var i = 0; i < tmp.length; i++)
  {
    if (tmp[i][0] == primary)
      cur = i;
  }
  if (cur != undefined)
  {
    this.size = tmp[cur][1].length;
    if (this.size == 0)
      this.cback();
    for (var i = 0; i < this.size; i++)
    {
      var img = document.createElement('img');
      img.src = prefix+tmp[cur][1][i];
      img.onload = this.imgReady.bind(this);
      img.onerror = this.imgError.bind(this);
      this.tab.push(img);
      console.log('caching:', img.src);
    }
    tmp.splice(cur, 1);
    return;
  }
  this.cback();
}

cache.prototype = {
  counter:0,
  size:0,
  tab:0,
  cback:function(){return;},
  imgReady:function(element){
    this.counter++;
    if (this.counter == this.size){
      storeCache(this.tab)
      this.cback(this.tab);
    }},
  imgError:function(){
    DEBUG.innerHTML+='[ERROR] cache error!<br>';
    console.log('cache error...');
    this.imgReady();}
}

キャッシュリストは次のようになります。

[
  [
    'main',
    [
      '/pictures/party.png',
      '/pictures/icon.png',
      '/pictures/+1.png',
      '/pictures/splash.jpeg',
      '/pictures/logo_compact.png',
      '/pictures/dj.png',
      '/pictures/sign.png',
      '/textures/main.jpg',
      '/textures/shadow.png',
      '/textures/smallshadow.png',
      '/textures/outlineH.png',
      '/textures/outlineV.png',
      '/textures/bg.jpg',
      '/textures/alt.jpg'
    ]
  ],
  [
    'theme_selector',
    [
      '/../uni/p1.png',
      '/../uni/p1a.png',
      '/../uni/p2.png',
      '/../uni/p2a.png',
      '/../uni/p3.png',
      '/../uni/p3a.png',
    ]
  ],
  ...
]

実際には、すべてのサブサイトに 1 つのキャッシュ ファイルを使用しているため、キャッシュ リストに「main」または「theme_selector」識別子があります (これらはプレフィックス引数として渡されます)。

したがって、一般的な考え方は、重要な画像ごとに画像要素を作成し、それらすべてが onload イベント (または onerror) を発生させた後にアクションを続行することです。これは、それらがブラウザーによって既にキャッシュされ、必要な場所に即座に表示されるためです。

于 2013-10-02T19:37:45.777 に答える