2016-05-14 6 views
1

イメージをプリロードしようとしています。イメージをバックグラウンドイメージとして設定する必要がある場合は、準備が整い、CSSの遷移中に読み込まれません。私はAJAX load()メソッドを使ってそれをしようとしましたが、私はAJAXなしでそれを行うことができるはずだと思います。私はimgタグやsrcは必要ないので、このようなことはうまくいきませんが、後でバックグラウンドイメージとして設定できるように、バックグラウンドイメージの直接URLを保存するようなものです。イメージを後でjQueryで背景イメージとして設定するにはどうしたらいいですか?

var img = new Image(); img.src = 'img.jpg'; 

これは私がこれまで何をやったかである:

$(document).ready(function() { 
$('#LogoContainer').hover(function() { 
    $('#LogoMainPart').fadeTo('slow', 0.3); 
    $('#LogoOtherPart').fadeTo('slow', 1); 
    $('#Introduction').css('background-image', 'url(hoverbackground.jpg)'); 
}, function() { 
    $('#LogoMainPart').fadeTo('slow', 1); 
    $('#LogoOtherPart').fadeTo('slow', 0.3); 
    $('#Introduction').css('background-image', 'url(background.jpg)'); 
}); 
}); 

答えて

1

var myImage = new Image(); 

でイメージオブジェクトを作成した後にイメージをロードすること画像のSRCを割り当てますブラウザのキャッシュはそうです:

これはブラウザキャッシュに入っているので、好きなときはいつでもDOMに追加できます:

document.getElementById('myDiv').style.background = 'url(my-bknd.jpg)'; 
+0

ありがとう、とてもシンプルで機能します!私は、ホバリング背景画像アニメーションのためのCSSリニアトランジションを使用しています、私はホバリング時に動作しますが、マウスでは動作しません。 CSSでリバーストランジションを適用するオプションがありますか、またはjQueryフェーディングのために直接移動する必要はありますか?私は背景イメージでそれを行うことができるかどうかはわかりません。 –

+0

@AdrianaCota CSSの背景不透明度をアニメーション化することはCSS標準(https://www.w3.org/TR/css3-transitions/#animatable-css)ではないため広くサポートされていませんが、この周り。ここにペン(http://codepen.io/haltersweb/pen/QNPVLq)があります。ここで、バックグラウンドとして動作するように子divでコンテンツdivを作成しました。コンテンツdivにマウスポインタを置くと、bknd divは不透明度が1秒以上になります。マウスオーバーすると、トランジションが逆になります。ホバー状態は親にあり、不透明度の遷移は子にあります。 – haltersweb

関連する問題