Question

在页面上，我有一个带有某个图像作为background-url css属性。

我想要发生的是通过jquery / ajax（到background-url属性）加载第二个（远程）图像，如果有任何类型的错误检索图像，加载辅助＆＃ 34;默认＆＃34;图像。

我将如何完成这样的事情？

非常感谢！

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 else错误函数将设置默认图像url。

阅读注释以正确理解步骤，并使用控制台检查ajax调用的执行方式并返回数据。如果您有任何问题，请告诉我。

Answer 2

这是我能够提出的：

$(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/

我无法用图像测试它，但我相信它会起作用。

通过jquery将远程镜像加载到background-url（css）中并进行错误处理

2 个答案: