data-layzr-bg is removed in 2.0.0?

[Samuel Siau]

Hi there,
I really like your layzr.js. I hope "data-layzr-bg" feature keep in v2.0.0. ;)

Cheers,
S

[Michael Cavalea]

@samuelsiau it has been removed in v2, mainly because it conflicts with srcset support. currentSrc doesn't work in Safari or IE10/11, so there's no way to determine the truly "best" source for the background image.

luckily, using the src:after event, you can mimic the behavior. just get the src attribute, and set it as a background image. sample code below:

instance.on('src:after', element => {
  element.style.backgroundImage = `url("${ element.getAttribute('src') }")`
})

[Carson Shold]

Is it just me, or does src:after fire only when a scroll triggers the lazy loading? I have an image in the viewport on load and it doesn't fire, so I can't set the background image with that method.

[Michael Cavalea]

@cshold assuming youre using the check function to load the images in the initial viewport, it should fire. the check method is the one thats run on scroll - so there should be no difference in its behavior when called manually

[Carson Shold]

Yup, was using:

instance
          .update()           // track initial elements
          .check()            // check initial elements
          .handlers(true)     // bind scroll and resize handlers

Like in your answer to #56

Will keep digging and let you know if I can't figure it out. Cheers.

[Michael Cavalea]

Yep, that's the correct usage. Try the src:before event too. The source should be available in that function before it's been set.