Setting rootMargin in initSimpleImg doesn't seem to have any affect

[dustinkerstein]

In the global config via:

initSimpleImg({ rootMargin: '800px 800px 800px 800px'})

Nothing seems to change. Am I calling this incorrectly?

Thanks, Dustin

[bluebill1049]

Hey Dustin,

Simple image use Intersection Observer for image detection.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

rootMargin
Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. Defaults to all zeros.

let me know if the above explanation make sense.

cheers bill

[dustinkerstein]

Yah, that makes sense but I just haven't been able to get it to work. Am I calling the global config correctly?

[dustinkerstein]

Just played with this a little more. I can see an effect when I use something like:

initSimpleImg({ rootMargin: '-800px 0px -800px 0px'})

Which results in a much narrower window. But no matter how far I go in the positive direction, I can't seem to get it to load more than what is currently in view.

I now have a hunch that this is due to me using an overflow container. Do you know if it's possible to easily account for this in react-simple-img? Thanks!

[bluebill1049]

hmmm everything is driven by interaction observer API with this package 🤔 can you try to set the threshold to be [0]?

[dustinkerstein]

Doesn't seem to have any affect with:

initSimpleImg({
    threshold: [0]
})

Same with this:

initSimpleImg({
    threshold: [0],
    rootMargin: '800px 0px 800px 0px'
})

[bluebill1049]

how about try rootMargin: '80px 0px 80px 0px' instead of 800px

[dustinkerstein]

Same thing. Seems like I can only ever shrink the detection window with negative values.

A related issue is that iOS devices (I've so far only tested on an iPhone 5s) I can't seem to get any of the in-view images to load initially. It always requires a scroll (even the slightest triggers it). I'll submit another issue specifically for this one.

[dustinkerstein]

Were you ever able to replicate this on a div with overflow: scroll?