1 
<style>
    .image {
        width: 136px;
        height: 23px;
        background-color: red;
        background-image: url(placeholder.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto 100%;
    }

    .image.real {
        background-color: blue;
    }
</style>
<div id="image" class="image"></div>

在上面的布局中，我想从 URL 中获取另一个图像，并在获取图像后，将另一个类添加到 div 并将其背景图像 URL 设置为这个新 URL。就像是：

var image = document.getElementById('image');
image.className += ' real';
image.style.backgroundImage = 'url(http://www.example.com/real.png)';

但是，当图像不存在时，就会出现问题。我怎样才能做这样的事情并添加real类名并仅在图像存在时更改 URL，否则不更改？

我正在考虑发出 AJAX 请求以查看它是否成功，如果成功则设置类名和 URL，但我想知道是否有更好的方法。

（小提琴）

4

2 回答 2

1

这是一个使用 jQuery 的示例

我认为您应该创建一个新的图像元素，将其附加到 DOM 并监听事件：

var image = $('<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/300px-Hopetoun_falls.jpg" />');
image.on("load", function() {
    // add the class here
    invisibleContainer.remove();
    console.log("loaded");
});
image.on("error", function() {
    // do something if the image is missing
    console.log("image is missing");
});
var invisibleContainer = $('<div></div>');
invisibleContainer.css("display", "none");
$('body').append(invisibleContainer);

JSfiddle http://jsfiddle.net/qkXZ4/

于 2013-09-08T17:03:45.483 回答
1

这是一个使用原生 JavaScript 的示例

在将其应用为背景之前，您需要检查图像是否存在（可以加载）。

此问题之前已通过以下方式解决：

javascript 检查图像是否存在

它提供了一种用于检查图像是否存在的原生 JavaScript 方法。

代码可能如下所示：

var image = document.getElementById('image');
image.src = "http://www.example.com/real.png";

image.onerror = function( ) {
    /* do some appropriate action... */
}​​​​​​​​​​​​​​​​​
img.onload = function( ) {
    image.className += ' real';
    image.style.backgroundImage = 'url(http://www.example.com/real.png)';
}

评论

我不确定加载图像的服务器开销是否小于与发出 AJAX 请求相关的开销。也许其他人可以发表评论。

于 2013-09-08T17:22:53.663 回答