JSONP是否会干扰背景图像的获取？

Question

我使用JSONP返回状态，但我也将图片和一些详细信息显示为列表中的一项。当我加载页面时，我看到加载所有图片的延迟，除了第一张图片，它花费的时间大约与JSONP调用拉取状态的时间一样长。您可以看到该here。

JSONP有没有什么固有的东西会影响背景图片的加载？我认为这是一个异步调用，所以我不确定为什么浏览器会阻止调用来拉取图像。下面是我正在使用的CSS (ID是在我迭代列表中的项时动态生成并在运行时提供的)：

<div class='avatar status available' style='background-image: url(https://services.xxx.com/pics/{id}.jpg);'><span></span></div>

Answer 1

我发现最好的解决方案不是使用CSS，而是<img>标签。所以现在我的代码变成：

<div class='avatar status available'><img onerror='imgError(this)' src='https://services.xxx.com/pics/{id}.jpg'/></div>

这会导致图像按预期加载，而不会被阻塞，并且如果图像不适合发送默认图像，我可以检查错误：

function imgError (image) {
    image.onerror = function () {
        this.parent().addClass('user');
    }
    image.src = "/resources/img/user.png";
    return true;
}

Answer 2

背景图片展示规则需要图片或资源的绝对路径(URL)。在您的链接中，绝对(URL)是http://content.../d812611d-5284-4abe-bb85-4ccda1424f16/2013-04-18_1722.png

不推荐显示来自CSS的动态图像。