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

对于背景规则中的显示图像，您需要图像或资源的绝对路径（URL）。在您的链接中，绝对（网址）为http://content.../d812611d-5284-4abe-bb85-4ccda1424f16/2013-04-18_1722.png

不建议从CSS显示动态图像。

Answer 2

我找到的最佳解决方案是不使用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;
}

JSONP可以干扰获取背景图像吗？

2 个答案: