Javascript 将按钮的背景图像设置为页面中已包含的元素

基本上，我希望使用图像url以外的内容为按钮指定背景图像。能够将背景图像设置为DOM中包含的已加载元素将是理想的。这样我就可以在DOM中缓存正在加载的gif（显示在按钮上），而不必在单击按钮时获取它

我认为没有必要用代码来说明这个问题，但这里还是有一些

由于单击时加载图像，因此不理想：

    that.submitButtonSelector.css('background-image', 'url(/Content/_activity/ajax-loader.gif)');

理想（但没有明显的实现方式）

---

如果您通过url加载加载的gif，在大多数情况下它将被缓存。你只需要下载一次。之后，它将从缓存中提供。我唯一能想到的是使用base64源代码。如果不生成HTTP请求，这会有好处，但在实际字节数方面会更大（我不认为更大的字节比另一个HTTP请求慢，但您可以始终对它们进行基准测试）

根据我的经验，如果需要立即显示加载图标并且图标足够小，我认为base64图像非常好，但是如果不需要立即显示，我建议使用javascript通过url预加载图像，并且只依赖缓存版本

因此，在您的情况下，如果使用base64，您可以使用

that.submitButtonSelector.css('background-image', 'url(data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==)');

body:after{
内容：网址（数据：image/gif；base64，r0lgodlheaaqaap///waaamlcwkjcqgaagjiyokcgpkskih+gknyzw0zwqgd2l0acbhamf4bg9hzc5pbmzvach5baakaaaif8ltkvuuuuuuuuuyljadaqaacwaaaaaaaaaqaadmwi63p4wyklre2mioggznadomgzzzzznzzzzzydydadka+diad2dbuqdaqaaaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqAEAAZYIUJIJK8PBYJDMLFYVBOVJHA70GU7XSUJMKTWHPAKZLO9HMAOKWJZB7RF8AYPDZBZBQFKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK3lQGBMLAJibufbSlKAAAh+QQACGACWAAAAAAAAAAAAAAAAAAAADMGI63P7WCRHZNFVGU2NFWLWCI3WGC3TSWHUFGXTAUKGCBTGENBMJAEJSXGMLWZPEACH5BAACAAAAAAAAAAAAAAAAAQAAAMYCLRC/JDKSATLQTSCKDCECAJDI7HCQ4EMTCYRCYRCHVTQLAIB1YCHICNLKAAAOWAAAAAAAAAAAAAA=）
}

您可以使用一个隐藏的div将图像预加载到缓存中，然后在加载后可以添加背景

HTML:

jQuery：

$("#img").load(function() {
    $(submitButtonSelector).click(function() {
        that.submitButtonSelector.css("background-image", "/Content/_activity/ajax-loader.gif");
    });
});

---

欢迎给出否决投票的原因。搜索并没有揭示这个问题的解决方案。A可以想出一个原因：你的代码在哪里？你迄今为止尝试了什么？也许否决投票人想看看你当前的代码是什么，如果你迄今为止尝试了什么（不，我不是否决投票人，只有我的2美分=）

<img id="img" src="/Content/_activity/ajax-loader.gif" />

#img {
    display: none;
}

$("#img").load(function() {
    $(submitButtonSelector).click(function() {
        that.submitButtonSelector.css("background-image", "/Content/_activity/ajax-loader.gif");
    });
});