私はあなたのフィドルをフォークし、コードを少しクリーンアップしました:http: //jsfiddle.net/4FzqA/。
クリーンアップしたバージョンとオリジナルのバージョンを比較した後、唯一の違いは、フィドルが「onLoad」に設定されているときに、私のフィドルが「onDomReady」に設定されていることです。
それ以外の場合、コードは機能しているはずです。
window.onload = function() {
var button = $("#fade_out").click(changeBackground);
}
function changeBackground() {
$('#background').fadeOut('slow', function() {
$('#background_hidden').fadeIn('slow');
});
}
編集:元のフィドルが機能しなかったため、window.onloadが元のフィドルのonLoadと競合していたようです。window.loadをドキュメント対応に変更したとき、すべてが順調だったので、次のようになります。
$(document).ready(function() {
var button = $("#fade_out").click(changeBackground);
});
別の編集:画像が大きい場合は、画像が読み込まれるのを待つことができますが、キャッシュから取得した場合、読み込みはトリガーされないことに注意してください。
$(document).ready(function(){
var img = new Image();
$(img)
.hide()
.load(function(){
$("body").append(this);
$(this).fadeIn(3000);
})
.attr("src", "files/originals/01.jpg");
});
取得元:Chromeでの大きな画像のフェードイン。
別の編集:それの音から、それが画像サイズの問題であると推測するのは正しいかもしれません。元のフィドル(http://jsfiddle.net/4FzqA/7/)を新しい画像と負荷で更新しました。画像は毎回読み込まれることに注意してください。これはあまり効率的ではありません。しかし、それはあなたにアイデアを与えるでしょう。以下はJSです。
$(document).ready(function() {
var button = $("#fade_out").click(changeBackground);
});
function changeBackground() {
$('#background').fadeOut('slow', function () {
$('#background_hidden')
.attr('src', 'http://img688.imageshack.us/img688/8633/daynightm.jpg?' + (new Date()).getTime())
.load(function () {
$(this).fadeIn('slow');
});
});
}