Lazyload background-image of div elements

[boxedpaul]

I'm trying to lazy load the background-image of <div> elements from a CDN.

I'm using a slightly modified version of the lazybeforeunveil callback script that's in your examples (the original didn't update the style attribute at all).

My target div starts like this:

<div data-bg="//s3.amazon.com/image.jpg" class="lazyload" style="">

The callback script looks like this:

<script>
//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 + ')');
}
});
</script>

The end result is this:

<div data-bg="//s3.amazon.com/image.jpg" class="lazyloaded" style="background-image: url(//s3.amazon.com/image.jpg)" >

...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.

[boxedpaul]

(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:

<script>
//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 + "')");
}
});
</script>