Lazy not working with Sapper

[rawoke083]

HI, this is a great plugin ! It works well if I "browse" to a page(client fetch) but if I refresh the page (preload /ssr) then the image doesn't appear - only when I start moving the mouse. Not sure what the SEO impact will be ? I'm guessing the goolge-bot doesn't move a cursor ?

I've installed with -D and my package.json file looks like this:

 "devDependencies": {
...
"svelte-lazy": "^0.1.11",
...

[leafOfTree]

Hi, thanks for your time. I'm not quite sure why the image only appears by moving the mouse after refreshing. This plugin only listens to scroll and size events. So I guess it might be a browser-related image rendering issue. Could you please try something to check

• Any error in devtools Console or Elements about the image?
• Does text appear normally inside <Lazy>?
• Does the image appear normally outside <Lazy>?
• Or the OS and browser versions so I can try to reproduce it.

[clockelliptic]

I'm having the same issue in chrome. I have a lazy-loaded image that is at the top of a page. when the page loads, the image doesn't load until a scroll event occurs.

[leafOfTree]

Hi, thanks for the information. I've created a new sapper project and add a lazy-loaded image at the top of the index page. But I couldn't reproduce it. Could you please check if there is any error in console? Or a minimal example might be helpful.

[leafOfTree]

I think this issue is similar to #17. Please try the latest version if you'd like to.

[mkyral]

Hi, I have the same issue in my application. There is a list of items on page and filter that can user use to filter list. In many times happen, that instead of item, only "Loading..." text is shown and content loads properly on page scroll. Usually no issue, but when you limit list to only several items that fits to screen, it is not possible to scroll and content is newer shown.

I've made a quick and dirty example that demonstrates the issue: https://svelte.dev/repl/41837854830d442285f20ac2cea4e86a?version=3.42.6

Try to search different characters, the results are inconsistent.

Hope it will help and issue will be fixed.

[mkyral]

So after some investigation the issue is that filtered elements are shown on screen directly, without triggering scroll or resize event. So the function loadHandler() is not called and element is not loaded. If I first scroll trough whole list and load all items, filtering works correctly.

[leafOfTree]

Hi, thanks for providing the example, which is very helpful. You're right the function would not be called at all if the element was shown not by resize or scroll.

I found IntersectionObserver: https://devdocs.io/dom/intersectionobserver fits the scenario very well. The change is published. Please update and see if it works. Verified on https://svelte.dev/repl/41837854830d442285f20ac2cea4e86a?version=3.42.6

[mkyral]

Thanks, I can confirm that new version works. I don't need workaround with triggering "resize" event anymore.