The end result is this:\n
...but the background image isn't rendering.\n What am I doing wrong? I'm guessing this has something to do with actually rendering the image?\n Thanks.","upvoteCount":1,"answerCount":1,"acceptedAnswer":{"@type":"Answer","text":" (facepalm)\n The image I was trying to load included a space. Because I hadn't enclosed the background-image:url in quotes, it was erroring.\n Corrected code:\n
-
I'm trying to lazy load the background-image of I'm using a slightly modified version of the My target div starts like this: The callback script looks like this: The end result is this: ...but the background image isn't rendering. What am I doing wrong? I'm guessing this has something to do with actually rendering the image? Thanks.
Beta
Was this translation helpful?
Give feedback.
-
(facepalm) The image I was trying to load included a space. Because I hadn't enclosed the background-image:url in quotes, it was erroring. Corrected code:
Beta
Was this translation helpful?
Give feedback.
","upvoteCount":1,"url":"https://github.com/aFarkas/lazysizes/discussions/944#discussioncomment-2292522"}}}
lazybeforeunveil
callback script that's in your examples (the original didn't update the style attribute at all).
//add simple support for background images:
document.addEventListener('lazybeforeunveil', function(e){
var bg = e.target.getAttribute('data-bg');
if(bg){
e.target.setAttribute('style', 'background-image: url(' + bg + ')');
}
});
Replies:
1 comment
//add simple support for background images:
document.addEventListener('lazybeforeunveil', function(e){
var bg = e.target.getAttribute('data-bg');
if(bg){
e.target.setAttribute("style", "background-image: url('" + bg + "')");
}
});
(facepalm)
The image I was trying to load included a space. Because I hadn't enclosed the background-image:url in quotes, it was erroring.
Corrected code:
//add simple support for background images:
document.addEventListener('lazybeforeunveil', function(e){
var bg = e.target.getAttribute('data-bg');
if(bg){
e.target.setAttribute("style", "background-image: url('" + bg + "')");
}
});