javascript - Set background-image for button to element already contained within page -
javascript - Set background-image for button to element already contained within page -
basically want specify background-image button using other image url. beingness able set background-image loaded element contained within dom ideal. can cache loading gif (displayed on button) within dom , don't have fetch when button clicked.
i didn't think code necessary illustrate problem here anyway
not ideal due image loading on click:
that.submitbuttonselector.css('background-image', 'url(/content/_activity/ajax-loader.gif)');
ideal (but no obvious way achieve)
that.submitbuttonselector.css('background-image', '#precachedimage');
if load loading gif via url, cached in cases. need download once. after served cache. other thing can think of utilize base64 source. has benefit if not generating http request, larger when comes actual bytes (i don't think larger size slower http request, can benchmark them).
in experience believe base64 images great if need show loading icon , if icon little enough, if don't need show right away, suggest preloading image via url javascript , relying on cached version.
so in case, if went base64, use
that.submitbuttonselector.css('background-image', 'url(data:image/gif;base64,r0lgodlheaaqapiaap///waaamlcwkjcqgaaagjiyokcgpkskih+gknyzwf0zwqgd2l0acbhamf4bg9hzc5pbmzvach5baakaaaaif8ltkvuu0nbueuyljadaqaaacwaaaaaeaaqaaadmwi63p4wyklre2mioggznadomgyjrbexwroumcg2lmdewnhqlvsyod2mbzkydadka+diaaah+qqacgabacwaaaaaeaaqaaadnai63p5ojcegg4qmu7dmikrxqlfuydezigbmrvsaqhwctxxf7weyb4ag1xjihkmzsiukkhiaifkeaaoaagasaaaaabaaeaaaazyiujijk8pbyjdmlfyvbovjha70gu7xsujhmktwhpakzlo9hmaokwjz7rf8aypddzkpzbqfvwqaifkeaaoaawasaaaaabaaeaaaazmiumilk8oyhphsnfzfhyumcyuhdaqxridhhbgqrokw0r8dyljd8z0fmdgsgo/iphi5taaaifkeaaoabaasaaaaabaaeaaaaziiunink0rnzbtwgpnmgqwmdsngxgjuliweur5owuipz8paeame6twfwyysgo/ipfksaaah+qqacgafacwaaaaaeaaqaaadmwi6imkqorfjdoe82p4wgccc4ceuqradylesojembgsuc2g7sdx3lqgbmlajibufbslkaaah+qqacgagacwaaaaaeaaqaaadmgi63p7wcrhznfvdmghu2nfwlwci3wgc3tswhufgxtaukgcbtgenbmjaejsxgmlwzpeaach5baakaacalaaaaaaqabaaaamyclrc/jdksatlqtsckdcecajdii7hcq4emtcpyrcuubjcyrghvtqlaib1yhicnlsrkaaaowaaaaaaaaaaaa==)');
class="snippet-code-css lang-css prettyprint-override">body:after { content: url(data:image/gif;base64,r0lgodlheaaqapiaap///waaamlcwkjcqgaaagjiyokcgpkskih+gknyzwf0zwqgd2l0acbhamf4bg9hzc5pbmzvach5baakaaaaif8ltkvuu0nbueuyljadaqaaacwaaaaaeaaqaaadmwi63p4wyklre2mioggznadomgyjrbexwroumcg2lmdewnhqlvsyod2mbzkydadka+diaaah+qqacgabacwaaaaaeaaqaaadnai63p5ojcegg4qmu7dmikrxqlfuydezigbmrvsaqhwctxxf7weyb4ag1xjihkmzsiukkhiaifkeaaoaagasaaaaabaaeaaaazyiujijk8pbyjdmlfyvbovjha70gu7xsujhmktwhpakzlo9hmaokwjz7rf8aypddzkpzbqfvwqaifkeaaoaawasaaaaabaaeaaaazmiumilk8oyhphsnfzfhyumcyuhdaqxridhhbgqrokw0r8dyljd8z0fmdgsgo/iphi5taaaifkeaaoabaasaaaaabaaeaaaaziiunink0rnzbtwgpnmgqwmdsngxgjuliweur5owuipz8paeame6twfwyysgo/ipfksaaah+qqacgafacwaaaaaeaaqaaadmwi6imkqorfjdoe82p4wgccc4ceuqradylesojembgsuc2g7sdx3lqgbmlajibufbslkaaah+qqacgagacwaaaaaeaaqaaadmgi63p7wcrhznfvdmghu2nfwlwci3wgc3tswhufgxtaukgcbtgenbmjaejsxgmlwzpeaach5baakaacalaaaaaaqabaaaamyclrc/jdksatlqtsckdcecajdii7hcq4emtcpyrcuubjcyrghvtqlaib1yhicnlsrkaaaowaaaaaaaaaaaa==) }
javascript jquery html css
Comments
Post a Comment