jquery - エラー処理を使用して jquery 経由でリモート イメージを background-url (css) にロードする

Question

このページには、background-url css プロパティとして特定の画像を含む があります。

私が望んでいるのは、jquery/ajax を介して (background-url プロパティに) 2 番目の (リモート) 画像をロードし、画像の取得中に何らかのエラーが発生した場合は、2 番目の「デフォルト」画像をロードすることです。

どうすればそのようなことを達成できますか?

どうもありがとう！

Answer 1

        $(document).ready(function() {
          // Handler for .ready() called.
            $.ajax({
                    url: "/loadimageurl.php",
                    type: "post",
                    data: data,
                    // callback handler that will be called on success
                    success: function(imageUrl, textStatus, jqXHR){
                        // log a message to the console
                        console.log("Hooray, it worked! Load The Image Here");
                        $('body').css('background-image', 'url(' + imageUrl + ')');
                    },
                    // callback handler that will be called on error
                    error: function(jqXHR, textStatus, errorThrown){
                        DefaultimageUrl = 'path/to/default/image.jpg';                        
                        // log the error to the console
                        console.log(
                            "Load Default Image here! The following error occured: "+
                            textStatus, errorThrown
                        );
                        $('body').css('background-image', 'url(' + DefaultimageUrl + ')');
                    }
                });


        });

ページが読み込まれると、呼び出された ajax が起動loadimageurl.phpされ、呼び出されます。データ変数は、必要に応じてデータを php スクリプトにポストします。呼び出しが成功した場合 (php スクリプトから画像の URL を返す)、画像の URL を設定します。それ以外の場合、エラー関数はデフォルトの画像の URL を設定します。

コメントを読んで手順を正しく理解し、コンソールを使用して ajax 呼び出しがどのように実行されているかを確認し、データを返します。問題がある場合はお知らせください。

Answer 2

This is what I was able to come up with:

$(function() {
    var main_image = '';
    var second_image = '';
    $.ajax({url: main_image, cache: false, success: function(d) {
        console.log('success');
        $('#bg').css('background',main_image);                
    }, error: function() {
        console.log('failure');
        $('#bg').css('background',second_image);
    }});    
});​ 

jsFiddle: http://jsfiddle.net/sVZdK/

I was unable to test it with images, but I believe it will work.